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

rebuilt: vuex to pinia

Browse Source
This commit is contained in:
IchliebedichZhu 2024-03-29 14:35:58 +00:00
parent 7da1a789ef
commit 946d9bcf7a
67 changed files with 1169 additions and 661 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
package-lock.json generated
View File

@ -17,6 +17,7 @@
"@webtoon/psd": "^0.4.0",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"cropperjs": "^1.6.1",
"dayjs": "^1.10.7",
"element-plus": "^2.3.7",
"fontfaceobserver": "^2.1.0",
@ -37,6 +38,7 @@
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@types/cropperjs": "^1.3.0",
"@types/fontfaceobserver": "^2.1.3",
"@types/node": "^20.11.24",
"@types/throttle-debounce": "^2.1.0",
@ -973,6 +975,16 @@
"framework-utils": "^1.1.0"
}
},
"node_modules/@types/cropperjs": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@types/cropperjs/-/cropperjs-1.3.0.tgz",
"integrity": "sha512-U3a/z302duKpXUHfMneFjrWDDoq5n+nsJ/YeJHoTI9LXSBtSsqMUyxEJPIMAzfDawF5nuG5c9FN2gY//ZGl5PA==",
"deprecated": "This is a stub types definition. cropperjs provides its own type definitions, so you do not need this installed.",
"dev": true,
"dependencies": {
"cropperjs": "*"
}
},
"node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@ -1830,6 +1842,11 @@
"url": "https://opencollective.com/core-js"
}
},
"node_modules/cropperjs": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.1.tgz",
"integrity": "sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA=="
},
"node_modules/cross-env": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",

2
package.json
View File

@ -20,6 +20,7 @@
"@webtoon/psd": "^0.4.0",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"cropperjs": "^1.6.1",
"dayjs": "^1.10.7",
"element-plus": "^2.3.7",
"fontfaceobserver": "^2.1.0",
@ -40,6 +41,7 @@
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@types/cropperjs": "^1.3.0",
"@types/fontfaceobserver": "^2.1.3",
"@types/node": "^20.11.24",
"@types/throttle-debounce": "^2.1.0",

20
src/common/hooks/dragHelper.ts
View File

@ -6,7 +6,9 @@
* @LastEditTime: 2023-11-22 18:11:15
*/
import store from '@/store'
import { useControlStore, useWidgetStore } from "@/pinia"
// import store from '@/store'
type TInitial = {
offsetX: number
@ -71,7 +73,10 @@ export default class DragHelper {
*/
public start(e: MouseEvent, finallySize: number) {
if (!this.cloneEl) {
store.commit('setDraging', true)
const controlStore = useControlStore()
controlStore.setDraging(true)
// store.commit('setDraging', true)
const app = window.document.getElementById('app')
if (!app || !e) return
app.classList.add('drag_active') // 整个鼠标全局变成抓取
@ -134,12 +139,19 @@ export default class DragHelper {
}
// 结束/完成处理（动画）
private finish(done = false) {
if (!this.dragging) {
return
}
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
this.dragging = false
store.commit('setDraging', false)
store.commit('selectItem', {})
controlStore.setDraging(false)
// store.commit('setDraging', false)
widgetStore.setSelectItem({})
// store.commit('selectItem', {})
if (!done) {
const { pageX, offsetX, pageY, offsetY } = this.initial as TInitial

28
src/common/hooks/mapGetters.ts
View File

@ -1,13 +1,21 @@
import { ComputedRef, computed } from 'vue'
import { useStore } from 'vuex'
/*
* @Author: Jeremy-Yu
* @Date: 2024-02-14 14:58:48
* @Description: 同意处理vue3 Mapgetters 已废弃
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-11-22 18:11:15
*/
export function useSetupMapGetters<T extends string>(strList: T[]) {
const mapData: Partial<{[x in T]: ComputedRef}> = {}
const getters = useStore().getters
// import { ComputedRef, computed } from 'vue'
// import { useStore } from 'vuex'
strList.forEach(val => {
mapData[val] = computed(() => getters[val])
})
// export function useSetupMapGetters<T extends string>(strList: T[]) {
// const mapData: Partial<{[x in T]: ComputedRef}> = {}
// const getters = useStore().getters
return mapData as {[x in T]: ComputedRef}
}
// strList.forEach(val => {
// mapData[val] = computed(() => getters[val])
// })
// return mapData as {[x in T]: ComputedRef}
// }

17
src/common/methods/DesignFeatures/setComponents.ts
View File

@ -5,15 +5,20 @@
* @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-02 11:50:00
*/
import store from '@/store'
export default async function setCompData(item: TCommonItemData[] | string) {
const group: TCommonItemData[] = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item))
let parent: Partial<TCommonItemData> = {}
import { useCanvasStore, usePageStore } from '@/pinia'
import { TdWidgetData } from '@/pinia/design/widget'
// import store from '@/store'
export default async function setCompData(item: TdWidgetData[] | string) {
const canvasStore = useCanvasStore()
const pageStore = usePageStore()
const group: TdWidgetData[] = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item))
let parent: Partial<TdWidgetData> = {}
Array.isArray(group) &&
group.forEach((element) => {
element.type === 'w-group' && (parent = element)
})
const { width: screenWidth, height: screenHeight } = store.getters.dPage
const { width: screenWidth, height: screenHeight } = pageStore.dPage
const { width: imgWidth = 0, height: imgHeight = 0 } = parent
let ratio = 1
// 先限制在画布内，保证不超过边界
@ -22,7 +27,7 @@ export default async function setCompData(item: TCommonItemData[] | string) {
}
// 根据画布缩放比例再进行一次调整
if (ratio < 1) {
ratio *= store.getters.dZoom / 100
ratio *= canvasStore.dZoom / 100
group.forEach((element) => {
element.fontSize && (element.fontSize *= ratio)
element.width *= ratio

13
src/common/methods/DesignFeatures/setImage.ts
View File

@ -5,8 +5,9 @@
* @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-01 20:55:51
*/
import store from '@/store'
// import store from '@/store'
import { getImage } from '../getImgDetail'
import { useCanvasStore, usePageStore } from '@/pinia'
export type TItem2DataParam = {
id?: string | number
@ -24,8 +25,10 @@ export type TItem2DataResult = {
}
export default async function setItem2Data(item: TItem2DataParam): Promise<Required<TItem2DataParam>> {
const canvasStore = useCanvasStore()
const pageStore = usePageStore()
const cloneItem = JSON.parse(JSON.stringify(item))
const { width: screenWidth, height: screenHeight } = store.getters.dPage
const { width: screenWidth, height: screenHeight } = pageStore.dPage
let { width: imgWidth, height: imgHeight } = item
if (!imgWidth || !imgHeight) {
const actual = await getImage(item.url)
@ -39,11 +42,11 @@ export default async function setItem2Data(item: TItem2DataParam): Promise<Requi
}
// 根据画布缩放比例再进行一次调整
if (ratio < 1) {
cloneItem.width = cloneItem.width * ratio * (store.getters.dZoom / 100)
cloneItem.height = cloneItem.height * ratio * (store.getters.dZoom / 100)
cloneItem.width = cloneItem.width * ratio * (canvasStore.dZoom / 100)
cloneItem.height = cloneItem.height * ratio * (canvasStore.dZoom / 100)
}
cloneItem.canvasWidth = cloneItem.width * (store.getters.dZoom / 100)
cloneItem.canvasWidth = cloneItem.width * (canvasStore.dZoom / 100)
// cloneItem.canvasHeight = cloneItem.height * (store.getters.dZoom / 100)
return cloneItem
}

2
src/common/methods/addMouseWheel.ts
View File

@ -6,7 +6,7 @@
* @LastEditTime: 2024-03-02 11:50:00
*/
import { useControlStore } from '@/pinia'
import store from '@/store'
// import store from '@/store'
type TAddEventCb = (e: Event) => void
type TAddEventObj = {

5
src/components/business/cropper/CropImage/CropImage.vue
View File

@ -23,17 +23,16 @@
import api from '@/api'
import { ElDialog } from 'element-plus'
import { ref, defineComponent, toRefs, reactive, nextTick } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
import { storeToRefs } from 'pinia'
import { useControlStore } from '@/pinia'
export default defineComponent({
components: { ElDialog },
emits: ['done'],
setup(props, context) {
const store = useStore()
// const store = useStore()
const state = reactive({
loading: false,
url: '',

4
src/components/business/cropper/CropImage/index.vue
View File

@ -23,7 +23,7 @@
import api from '@/api'
import { ElDialog } from 'element-plus'
import { ref, reactive, nextTick, toRefs } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
import { useControlStore } from '@/pinia'
@ -41,7 +41,7 @@ type TOpenItem = {
imgUrl: string
}
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const state = reactive({
loading: false,

4
src/components/business/image-cutout/ImageCutout/index.vue
View File

@ -41,7 +41,7 @@
<script lang="ts" setup>
import { reactive, nextTick, ref } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { ElProgress } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import uploader from '@/components/common/Uploader/index.vue'
@ -62,7 +62,7 @@ export type TImageCutoutState = {
loading: boolean;
}
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const state = reactive<TImageCutoutState>({
show: false,

8
src/components/business/image-cutout/ImageExtraction/index.vue
View File

@ -46,9 +46,9 @@ type TState = {
show: boolean;
showMatting: boolean;
isErasing: boolean;
radius: number | string;
radius: number;
brushSize: string;
hardness: number | string;
hardness: number;
hardnessText: string;
constants: MattingType['constants'] | null;
}
@ -83,8 +83,8 @@ let mattingParam: MattingType | null
const mattingStart = (mattingOptions: MattingType) => {
mattingOptions.initLoadImages(props.raw, props.result)
state.isErasing = mattingOptions.isErasing
state.radius = mattingOptions.radius
state.hardness = mattingOptions.hardness
state.radius = Number(mattingOptions.radius)
state.hardness = Number(mattingOptions.hardness)
state.constants = mattingOptions.constants
mattingParam = mattingOptions
}

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

@ -9,25 +9,26 @@
<div id="empty" class="moveable__remove-item zk-moveable-style"></div>
</template>
<script lang="ts" setup>
import { defineComponent, nextTick, onMounted, watch } from 'vue'
import { nextTick, onMounted, watch } from 'vue'
import Moveable, { EVENTS } from 'moveable' // PROPERTIES, METHODS,
import MoveableHelper from 'moveable-helper'
import { mapGetters, mapActions, useStore } from 'vuex'
// import { mapGetters, mapActions, useStore } from 'vuex'
// import { setTransformAttribute } from '@/common/methods/handleTransform'
import useSelecto from './Selecto'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { storeToRefs } from 'pinia'
import { useCanvasStore, useControlStore } from '@/pinia'
import { useCanvasStore, useControlStore, useWidgetStore, useForceStore, useHistoryStore } from '@/pinia'
const store = useStore()
// computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines']),
const {
dSelectWidgets, dActiveElement, activeMouseEvent, dWidgets, updateRect, updateSelect
} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'dWidgets', 'updateRect', 'updateSelect'])
// const store = useStore()
const widgetStore = useWidgetStore()
const controlStore = useControlStore()
const forceStore = useForceStore()
const historyStore = useHistoryStore()
const { guidelines } = storeToRefs(useCanvasStore())
const { showMoveable, showRotatable, dAltDown } = storeToRefs(controlStore)
const { dSelectWidgets, dActiveElement, activeMouseEvent, dWidgets } = storeToRefs(widgetStore)
const { updateRect, updateSelect } = storeToRefs(forceStore)
let _target: string | null = null
@ -38,12 +39,12 @@ watch(
await nextTick()
checkMouseEvent()
}, 10);
if (!val.record) {
if (!val || !val.record) {
return
}
if (!moveable) return
// 选中非面板 并且不是组合内的元素
if (val.uuid != -1) {
if (Number(val.uuid) != -1) {
await nextTick()
const target = `[id="${val.uuid}"]`
_target = `[id="${val.uuid}"]`
@ -70,7 +71,8 @@ watch(
checkMouseEvent()
})
// // End
store.commit('setShowMoveable', true)
controlStore.setShowMoveable(true)
// store.commit('setShowMoveable', true)
// 参考线设置
if (moveable.elementGuidelines && !moveable.elementGuidelines.includes(target)) {
moveable.elementGuidelines.push(target)
@ -126,7 +128,7 @@ watch(
watch(
() => updateSelect.value,
() => {
const items = store.getters.dSelectWidgets
const items = widgetStore.dSelectWidgets
setTimeout(async () => {
if (!moveable) return
moveable.updateRect()
@ -299,6 +301,7 @@ onMounted(() => {
moveable
.on('dragStart', ({ inputEvent, target, stop }) => {
if (!dActiveElement.value) return
if (inputEvent.target.nodeName === 'PRE') {
dActiveElement.value.editable && stop()
}
@ -313,25 +316,39 @@ onMounted(() => {
.on('dragEnd', ({ target, isDrag, inputEvent }) => {
// console.log('onDragEnd', inputEvent)
// TODO 清理mouseevent
store.commit('setMouseEvent', null)
widgetStore.setMouseEvent(null)
// store.commit('setMouseEvent', null)
inputEvent.stopPropagation()
inputEvent.preventDefault()
// console.log(this.holdPosition, inputEvent.pageX, inputEvent.pageY)
if (holdPosition) {
store.dispatch("updateWidgetData", {
uuid: dActiveElement.value.uuid,
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "",
key: 'left',
value: Number(holdPosition?.left),
})
store.dispatch("updateWidgetData", {
uuid: dActiveElement.value.uuid,
// store.dispatch("updateWidgetData", {
// uuid: dActiveElement.value.uuid,
// key: 'left',
// value: Number(holdPosition?.left),
// })
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "",
key: 'top',
value: Number(holdPosition?.top),
})
// store.dispatch("updateWidgetData", {
// uuid: dActiveElement.value.uuid,
// key: 'top',
// value: Number(holdPosition?.top),
// })
holdPosition = null // important
setTimeout(() => {
store.dispatch("pushHistory")
// pushHistory()
historyStore.pushHistory()
// store.dispatch("pushHistory")
}, 100)
}
})
@ -352,19 +369,25 @@ onMounted(() => {
const half = tf.substring(index + 1)
rotate = half.slice(0, half.indexOf(')'))
}
rotate &&
store.dispatch("updateWidgetData", {
uuid: dActiveElement.value.uuid,
key: 'rotate',
value: rotate,
})
rotate && widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "",
key: 'rotate',
value: rotate,
})
// rotate &&
// store.dispatch("updateWidgetData", {
// uuid: dActiveElement.value.uuid,
// key: 'rotate',
// value: rotate,
// })
})
.on('resizeStart', (args) => {
console.log(args.target.style.transform)
if (!moveable) return
moveable.snappable = false
if (dActiveElement.value.type === 'w-text') {
if (dActiveElement.value?.type === 'w-text') {
if (String(args.direction) === '1,0') {
moveable.keepRatio = false
moveable.scalable = false
@ -376,7 +399,7 @@ onMounted(() => {
startLS = Number(args.target!.style.letterSpacing.replace('px', ''))
resetRatio = 1
}
} else if (dActiveElement.value.type === 'w-image' || dActiveElement.value.type === 'w-qrcode' || dActiveElement.value.type === 'w-svg') {
} else if (dActiveElement.value?.type === 'w-image' || dActiveElement.value?.type === 'w-qrcode' || dActiveElement.value?.type === 'w-svg') {
const dirs = ['1,0', '0,-1', '-1,0', '0,1']
dirs.includes(String(args.direction)) && (moveable.keepRatio = false)
}
@ -384,10 +407,10 @@ onMounted(() => {
.on('resize', (args: any) => {
const { target, width, height, dist, delta, clientX, clientY, direction } = args
console.log(2, args)
if (dActiveElement.value.type === 'w-text') {
if (dActiveElement.value?.type === 'w-text') {
if (String(direction) === '1,1') {
resetRatio = width / resizeStartWidth
target!.style.fontSize = dActiveElement.value.fontSize * resetRatio + 'px'
target!.style.fontSize = (dActiveElement.value?.fontSize || 0) * resetRatio + 'px'
target!.style.letterSpacing = startLS * resetRatio + 'px'
target!.style.lineHeight = startHL * resetRatio + 'px'
}
@ -397,19 +420,23 @@ onMounted(() => {
// moveable.updateRect()
target.style.backgroundImage = 'none'
// moveable.keepRatio !== this.resetRatio > 1 && (moveable.keepRatio = this.resetRatio > 1)
} else if (dActiveElement.value.type == 'w-image' || dActiveElement.value.type === 'w-qrcode' || dActiveElement.value.type === 'w-svg') {
} else if (dActiveElement.value?.type == 'w-image' || dActiveElement.value?.type === 'w-qrcode' || dActiveElement.value?.type === 'w-svg') {
resizeTempData = { width, height }
} else if (dActiveElement.value.type == 'w-group') {
} else if (dActiveElement.value?.type == 'w-group') {
// let record = this.dActiveElement.record
// this.dActiveElement.tempScale = width / record.width
store.commit('resize', { width: width, height: height })
widgetStore.resize({ width: width, height: height })
// store.commit('resize', { width: width, height: height })
// this.resizeTempData = { width, height }
// let record = this.dActiveElement.record
// setTransformAttribute(target, 'scale', width / record.width)
} else {
store.commit('resize', { width: width, height: height })
widgetStore.resize({ width: width, height: height })
// store.commit('resize', { width: width, height: height })
}
dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('(0deg', `(${dActiveElement.value.rotate}`))
dActiveElement.value?.rotate && (target!.style.transform = target!.style.transform.replace('(0deg', `(${dActiveElement.value?.rotate}`))
})
.on('resizeEnd', (e: any) => {
if (!moveable) return
@ -435,19 +462,32 @@ onMounted(() => {
// }
const left = e.lastEvent.drag.translate[0]
const top = e.lastEvent.drag.translate[1]
store.dispatch("updateWidgetMultiple", {
uuid: dActiveElement.value.uuid,
widgetStore.updateWidgetMultiple({
uuid: dActiveElement.value?.uuid || "",
data: [
{
key: 'left',
value: Number(dActiveElement.value.left) + left,
value: Number(dActiveElement.value?.left) + left,
},
{
key: 'top',
value: Number(dActiveElement.value.top) + top,
value: Number(dActiveElement.value?.top) + top,
},
],
})
// store.dispatch("updateWidgetMultiple", {
// uuid: dActiveElement.value.uuid,
// data: [
// {
// key: 'left',
// value: Number(dActiveElement.value.left) + left,
// },
// {
// key: 'top',
// value: Number(dActiveElement.value.top) + top,
// },
// ],
// })
// 重置translate
const tf = e.target.style.transform
const iof = tf.indexOf('translate')
@ -459,26 +499,30 @@ onMounted(() => {
// }, 10)
}
if (resizeTempData) {
store.commit('resize', resizeTempData)
widgetStore.resize(resizeTempData)
// store.commit('resize', resizeTempData)
resizeTempData = null
// await this.$nextTick()
moveable.updateRect()
// 临时处理缩放后细线问题 https://github.com/palxiao/poster-design/issues/75
store.commit('setShowMoveable', false)
controlStore.setShowMoveable(false)
// store.commit('setShowMoveable', false)
setTimeout(() => {
store.commit('setShowMoveable', true)
controlStore.setShowMoveable(true)
// store.commit('setShowMoveable', true)
}, 10);
}
try {
if (dActiveElement.value.type === 'w-text') {
if (dActiveElement.value?.type === 'w-text') {
const d = e.direction || e.lastEvent.direction
String(d) === '1,1' && (dActiveElement.value.fontSize = dActiveElement.value.fontSize * resetRatio)
String(d) === '1,1' && (dActiveElement.value.fontSize = Number(dActiveElement.value?.fontSize) * resetRatio)
}
} catch (err) {}
moveable.keepRatio = true
})
.on('scaleStart', (e) => {
if (dActiveElement.value.type === 'w-text') {
if (dActiveElement.value?.type === 'w-text') {
startHL = Number(e.target!.style.lineHeight.replace('px', ''))
startLS = Number(e.target!.style.letterSpacing.replace('px', ''))
resetRatio = 1
@ -493,7 +537,7 @@ onMounted(() => {
const { target, scale, transform } = e
resetRatio = scale[0]
target!.style.transform = transform
dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('0deg', dActiveElement.value.rotate))
dActiveElement.value?.rotate && (target!.style.transform = target!.style.transform.replace('0deg', dActiveElement.value.rotate))
})
.on('scaleEnd', (e: any) => {
if (!moveable) return
@ -502,9 +546,9 @@ onMounted(() => {
moveable.keepRatio = true
console.log(e.target.style.transform)
try {
if (dActiveElement.value.type === 'w-text') {
if (dActiveElement.value?.type === 'w-text') {
const d = e.direction || e.lastEvent.direction
String(d) === '1,1' && (dActiveElement.value.fontSize = dActiveElement.value.fontSize * resetRatio)
String(d) === '1,1' && (dActiveElement.value.fontSize = Number(dActiveElement.value.fontSize) * resetRatio)
}
} catch (err) {}
})
@ -516,13 +560,13 @@ onMounted(() => {
for (let i = 0; i < events.length; i++) {
const ev = events[i]
const currentWidget = dWidgets.value.find((item: any) => item.uuid === ev.target.getAttribute('data-uuid'))
const left = Number(currentWidget.left) + ev.beforeTranslate[0]
const left = Number(currentWidget?.left) + ev.beforeTranslate[0]
// debug -- start --
if (i === 1) {
console.log(Number(currentWidget.left), ev.beforeTranslate[0])
console.log(Number(currentWidget?.left), ev.beforeTranslate[0])
}
// debug -- end --
const top = Number(currentWidget.top) + ev.beforeTranslate[1]
const top = Number(currentWidget?.top) + ev.beforeTranslate[1]
ev.target.style.left = `${left}px`
ev.target.style.top = `${top}px`
holdGroupPosition[`${ev.target.getAttribute('data-uuid')}`] = { left, top }
@ -532,16 +576,27 @@ onMounted(() => {
for (const key in holdGroupPosition) {
if (Object.prototype.hasOwnProperty.call(holdGroupPosition, key)) {
const item = holdGroupPosition[key]
store.dispatch("updateWidgetData", {
widgetStore.updateWidgetData({
uuid: key,
key: 'left',
value: item.left,
})
store.dispatch("updateWidgetData", {
// store.dispatch("updateWidgetData", {
// uuid: key,
// key: 'left',
// value: item.left,
// })
widgetStore.updateWidgetData({
uuid: key,
key: 'top',
value: item.top,
})
// store.dispatch("updateWidgetData", {
// uuid: key,
// key: 'top',
// value: item.top,
// })
}
}
holdGroupPosition = null
@ -603,7 +658,8 @@ function checkMouseEvent() {
if (activeMouseEvent.value && moveable) {
moveable.dragStart(activeMouseEvent.value)
// 使用后销毁mouseevent
store.commit('setMouseEvent', null)
widgetStore.setMouseEvent(null)
// store.commit('setMouseEvent', null)
}
}
</script>

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

@ -1,8 +1,10 @@
import Selecto from 'selecto'
import { getElementInfo } from 'moveable'
import store from '@/store'
import Moveable, { getElementInfo } from 'moveable'
// import store from '@/store'
import { useWidgetStore } from '@/pinia'
export default function(moveable: any) {
export default function(moveable: Moveable) {
const widgetStore = useWidgetStore()
const selecto = new Selecto({
container: document.getElementById('page-design'),
selectableTargets: ['.layer'],
@ -23,16 +25,22 @@ export default function(moveable: any) {
e.added.forEach((el) => {
if (!Array.from(el.classList).includes('layer-lock') && !el.hasAttribute('child')) {
el.classList.add('widget-selected')
store.dispatch('selectWidgetsInOut', {
uuid: el.getAttribute('data-uuid'),
widgetStore.selectWidgetsInOut({
uuid: el.getAttribute('data-uuid') || "",
})
// store.dispatch('selectWidgetsInOut', {
// uuid: el.getAttribute('data-uuid'),
// })
}
})
e.removed.forEach((el) => {
el.classList.remove('widget-selected')
store.dispatch('selectWidgetsInOut', {
uuid: el.getAttribute('data-uuid'),
widgetStore.selectWidgetsInOut({
uuid: el.getAttribute('data-uuid') || "",
})
// store.dispatch('selectWidgetsInOut', {
// uuid: el.getAttribute('data-uuid'),
// })
})
moveable.renderDirections = [] // ['nw', 'ne', 'sw', 'se'] // []
moveable.rotatable = false

4
src/components/business/picture-selector/index.vue
View File

@ -32,7 +32,7 @@
<script lang="ts" setup>
import { reactive } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
import api from '@/api'
import { TGetImageListResult } from '@/api/material'
@ -50,7 +50,7 @@ type TState = {
const emits = defineEmits<TEmits>()
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const state = reactive<TState>({

4
src/components/business/qrcode/method.ts
View File

@ -37,7 +37,7 @@ export function generateOption(props: TQrcodeProps): Options {
...props.dotsOptions,
},
cornersSquareOptions: {
color: props.dotsOptions.color,
color: props.dotsOptions?.color,
// type: '',
// type: 'extra-rounded' as CornerSquareType,
// gradient: {
@ -47,7 +47,7 @@ export function generateOption(props: TQrcodeProps): Options {
// },
},
cornersDotOptions: {
color: props.dotsOptions.color,
color: props.dotsOptions?.color,
type: 'square' as CornerDotType,
// gradient: {
// type: 'linear', // 'radial'

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

@ -1,7 +1,12 @@
<template>
<div v-show="showMenuBg" id="menu-bg" class="menu-bg" @click="closeMenu">
<ul ref="menuList" class="menu-list" :style="styleObj">
<li v-for="(item, index) in menuListData.list" :key="index" :class="{ 'menu-item': true, 'disable-menu': dCopyElement.length === 0 && item.type === 'paste' }" @click.stop="selectMenu(item.type)">
<li
v-for="(item, index) in menuListData.list"
:key="index"
:class="{ 'menu-item': true, 'disable-menu': dCopyElement.length === 0 && item.type === 'paste' }"
@click.stop="selectMenu(item.type)"
>
{{ item.text }}
</li>
</ul>
@ -10,7 +15,7 @@
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import {
widgetMenu as widget,
pageMenu as page,
@ -18,17 +23,20 @@ import {
TMenuItemData, TWidgetItemData,
} from './rcMenuData'
import { getTarget } from '@/common/methods/target'
import { useSetupMapGetters } from '@/common/hooks/mapGetters';
// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
import { storeToRefs } from 'pinia';
import { useControlStore } from '@/pinia';
import { useControlStore, useWidgetStore } from '@/pinia';
const store = useStore()
// const store = useStore()
const menuListData = ref<TMenuItemData>({...menu})
const showMenuBg = ref<boolean>(false)
const widgetMenu = ref<TWidgetItemData[]>({...widget})
const pageMenu = ref<TWidgetItemData[]>({...page})
const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
const widgetStore = useWidgetStore()
// const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
const {dActiveElement, dWidgets, dCopyElement} = storeToRefs(widgetStore)
const { dAltDown } = storeToRefs(useControlStore())
@ -59,24 +67,27 @@ async function mouseRightClick(e: MouseEvent) {
if (uuid !== '-1' && !dAltDown.value) {
let widget = dWidgets.value.find((item: any) => item.uuid === uuid)
if (
widget.parent !== '-1' &&
widget.parent !== dActiveElement.value.uuid &&
widget.parent !== dActiveElement.value.parent
widget?.parent !== '-1' &&
widget?.parent !== dActiveElement.value?.uuid &&
widget?.parent !== dActiveElement.value?.parent
) {
uuid = widget.parent
uuid = widget?.parent || ""
}
}
store.dispatch('selectWidget', {
widgetStore.selectWidget({
uuid: uuid ?? '-1',
})
// store.dispatch('selectWidget', {
// uuid: uuid ?? '-1',
// })
showMenu(e)
}
}
function showMenu(e: MouseEvent) {
let isPage = dActiveElement.value.uuid === '-1'
let isPage = dActiveElement.value?.uuid === '-1'
menuListData.value.list = isPage ? pageMenu.value : widgetMenu.value
if (dActiveElement.value.isContainer) {
if (dActiveElement.value?.isContainer) {
let ungroup: TWidgetItemData[] = [
{
type: 'ungroup',
@ -109,33 +120,47 @@ function closeMenu() {
function selectMenu(type: TWidgetItemData['type']) {
switch (type) {
case 'copy':
store.dispatch('copyWidget')
widgetStore.copyWidget()
// store.dispatch('copyWidget')
break
case 'paste':
if (dCopyElement.value.length === 0) {
return
}
store.dispatch('pasteWidget')
widgetStore.pasteWidget()
// store.dispatch('pasteWidget')
break
case 'index-up':
store.dispatch('updateLayerIndex', {
uuid: dActiveElement.value.uuid,
widgetStore.updateLayerIndex({
uuid: dActiveElement.value?.uuid || "",
value: 1,
isGroup: dActiveElement.value.isContainer,
isGroup: dActiveElement.value?.isContainer,
})
// store.dispatch('updateLayerIndex', {
// uuid: dActiveElement.value.uuid,
// value: 1,
// isGroup: dActiveElement.value.isContainer,
// })
break
case 'index-down':
store.dispatch('updateLayerIndex', {
uuid: dActiveElement.value.uuid,
widgetStore.updateLayerIndex({
uuid: dActiveElement.value?.uuid || "",
value: -1,
isGroup: dActiveElement.value.isContainer,
isGroup: dActiveElement.value?.isContainer,
})
// store.dispatch('updateLayerIndex', {
// uuid: dActiveElement.value.uuid,
// value: -1,
// isGroup: dActiveElement.value.isContainer,
// })
break
case 'del':
store.dispatch('deleteWidget')
widgetStore.deleteWidget()
// store.dispatch('deleteWidget')
break
case 'ungroup':
store.dispatch('ungroup', dActiveElement.value.uuid)
widgetStore.ungroup(dActiveElement.value?.uuid || "")
// store.dispatch('ungroup', dActiveElement.value.uuid)
break
}
closeMenu()

17
src/components/business/save-download/CreateCover.vue
View File

@ -10,17 +10,18 @@
</template>
<script lang="ts" setup>
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import html2canvas from 'html2canvas'
import Qiniu from '@/common/methods/QiNiu'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { storeToRefs } from 'pinia';
import { useCanvasStore } from '@/pinia';
const store = useStore();
import { useCanvasStore, useWidgetStore } from '@/pinia';
// const store = useStore();
// const { dZoom } = useSetupMapGetters(['dZoom'])
const canvasStore = useCanvasStore()
const widgetStore = useWidgetStore()
const { dZoom } = storeToRefs(canvasStore)
@ -30,9 +31,13 @@ const { dZoom } = storeToRefs(canvasStore)
async function createCover(cb: any) {
const nowZoom = dZoom.value
// 取消选中元素
store.dispatch('selectWidget', {
uuid: '-1',
widgetStore.selectWidget({
uuid: '-1'
})
// store.dispatch('selectWidget', {
// uuid: '-1',
// })
canvasStore.updateZoom(100)
// store.dispatch('updateZoom', 100)

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

@ -39,7 +39,15 @@
'layer-active': getIsActive(layer.uuid),
'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid,
}" -->
<component :is="layer.type" v-for="layer in getlayers()" :id="layer.uuid" :key="layer.uuid" :class="['layer', { 'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid, 'layer-no-hover': dActiveElement.uuid === layer.uuid }]" :data-title="layer.type" :params="layer" :parent="dPage" :data-type="layer.type" :data-uuid="layer.uuid">
<component
:is="layer.type"
v-for="layer in getlayers()"
:id="layer.uuid" :key="layer.uuid"
:class="['layer', { 'layer-hover': layer.uuid === dHoverUuid || dActiveElement?.parent === layer.uuid, 'layer-no-hover': dActiveElement?.uuid === layer.uuid }]"
:data-title="layer.type" :params="layer"
:parent="dPage" :data-type="layer.type"
:data-uuid="layer.uuid"
>
<template v-if="layer.isContainer">
<!-- :class="{
layer: true,
@ -47,7 +55,14 @@
'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent,
'layer-hover': widget.uuid === dHoverUuid,
}" -->
<component :is="widget.type" v-for="widget in getChilds(layer.uuid)" :key="widget.uuid" child :class="['layer', { 'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent }]" :data-title="widget.type" :params="widget" :parent="layer" :data-type="widget.type" :data-uuid="widget.uuid" />
<component
:is="widget.type"
v-for="widget in getChilds(layer.uuid)"
:key="widget.uuid" child :class="['layer', { 'layer-no-hover':dActiveElement?.uuid !== widget.parent && dActiveElement?.parent !== widget.parent }]"
:data-title="widget.type" :params="widget"
:parent="layer" :data-type="widget.type"
:data-uuid="widget.uuid"
/>
</template>
</component>
@ -60,8 +75,8 @@
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
import { mapGetters, mapActions, useStore } from 'vuex'
import { onMounted } from 'vue'
// import {useStore } from 'vuex'
import { getTarget } from '@/common/methods/target'
// import { ElScrollbar } from 'element-plus'
import setWidgetData from '@/common/methods/DesignFeatures/setWidgetData'
@ -69,9 +84,9 @@ import PointImg from '@/utils/plugins/pointImg'
import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
import { debounce } from 'throttle-debounce'
import { move, moveInit } from '@/mixins/move'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useCanvasStore, useControlStore, usePageStore } from '@/pinia'
import { useCanvasStore, useControlStore, useGroupStore, usePageStore, useWidgetStore } from '@/pinia'
import { storeToRefs } from 'pinia'
import { TPageState } from '@/pinia/design/page'
// 页面设计组件
type TProps = {
pageDesignCanvasId: string
@ -82,24 +97,19 @@ type TParentData = {
height?: number
}
type TSetting = {
width?: number
height?: number
top?: number
left?: number
}
type TSetting = Partial<TPageState>
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const canvasStore = useCanvasStore()
const { pageDesignCanvasId } = defineProps<TProps>()
const {
dWidgets,
dActiveElement, dSelectWidgets,
dHoverUuid
} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets'])
const { dPage } = storeToRefs(usePageStore())
const { dZoom, dPaddingTop, dScreen } = storeToRefs(useCanvasStore())
const { dDraging, showRotatable, dAltDown } = storeToRefs(useControlStore())
const { dZoom, dPaddingTop, dScreen } = storeToRefs(canvasStore)
const { dDraging, showRotatable, dAltDown } = storeToRefs(controlStore)
const { dWidgets, dActiveElement, dSelectWidgets, dHoverUuid } = storeToRefs(widgetStore)
let _dropIn: string | null = ''
@ -123,11 +133,13 @@ onMounted(() => {
// },
async function dropOver(e: MouseEvent) {
if (!dActiveElement.value) return
if (dActiveElement.value.editable || dActiveElement.value.lock) {
return false
}
e.preventDefault()
let { data, type } = store.getters.selectItem
let { data, type } = widgetStore.selectItem
if (!data) return
if (type !== 'image') {
return
}
@ -136,7 +148,9 @@ async function dropOver(e: MouseEvent) {
const target = await getTarget(eventTarget)
if (!target) return
const uuid = target.getAttribute('data-uuid')
store.dispatch('setDropOver', uuid)
widgetStore.setDropOver(uuid ?? "-1")
// store.dispatch('setDropOver', uuid)
const imgEl = target?.firstElementChild?.firstElementChild as HTMLImageElement
if (eventTarget.getAttribute('putIn')) {
@ -157,10 +171,15 @@ async function drop(e: MouseEvent) {
}
if (!e || !e.target) return
const eventTarget = e.target as HTMLElement
store.commit('setDraging', false)
controlStore.setDraging(false)
// store.commit('setDraging', false)
const dropIn = _dropIn
_dropIn = ''
store.dispatch('setDropOver', '-1')
widgetStore.setDropOver("-1")
// store.dispatch('setDropOver', '-1')
// store.commit('setShowMoveable', false) // 清理上一次的选择
controlStore.setShowMoveable(false) // 清理上一次的选择
@ -168,9 +187,11 @@ async function drop(e: MouseEvent) {
let lost = eventTarget.className !== 'design-canvas' // className === 'design-canvas' , id: "page-design-canvas"
// e.stopPropagation()
e.preventDefault()
let { data: item, type } = JSON.parse(JSON.stringify(store.getters.selectItem))
let { data: item, type } = JSON.parse(JSON.stringify(widgetStore.selectItem))
// 清除临时数据
store.commit('selectItem', {})
widgetStore.setSelectItem({})
// store.commit('selectItem', {})
let setting: TSetting = {}
if (!type) {
return
@ -201,7 +222,8 @@ async function drop(e: MouseEvent) {
element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / dZoom.value)
element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / dZoom.value)
})
store.dispatch('addGroup', componentItem)
widgetStore.addGroup(componentItem)
// store.dispatch('addGroup', componentItem)
// addGroup(item)
}
// 设置坐标
@ -224,6 +246,7 @@ async function drop(e: MouseEvent) {
controlStore.setShowMoveable(true) // 恢复选择
const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
if (!widget) return
widget.imgUrl = item.value.url
// if (e.target.className.baseVal) {
// !widget.imgs && (widget.imgs = {})
@ -232,6 +255,7 @@ async function drop(e: MouseEvent) {
} else {
if (dropIn) {
const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid == dropIn)
if (!widget) return
widget.imgUrl = item.value.url
console.log('加入+', widget)
@ -239,14 +263,16 @@ async function drop(e: MouseEvent) {
controlStore.setShowMoveable(true) // 恢复选择
} else {
store.dispatch('addWidget', setting) // 正常加入面板
widgetStore.addWidget(setting as Required<TPageState>)
// store.dispatch('addWidget', setting) // 正常加入面板
}
}
} else if (type === 'bg') {
console.log('背景图片放置')
} else if (type !== 'group') {
console.log(setting)
store.dispatch('addWidget', setting) // 正常加入面板
widgetStore.addWidget(setting as Required<TPageState>)
// store.dispatch('addWidget', setting) // 正常加入面板
}
// 清除临时数据
// this.$store.commit('selectItem', {})
@ -255,11 +281,11 @@ async function drop(e: MouseEvent) {
function getScreen() {
const pageDesignEl = document.getElementById('page-design')
if (!pageDesignEl) return
store.dispatch('updateScreen', {
canvasStore.updateScreen({
width: pageDesignEl.offsetWidth,
height: pageDesignEl.offsetHeight,
})
// updateScreen({
// store.dispatch('updateScreen', {
// width: pageDesignEl.offsetWidth,
// height: pageDesignEl.offsetHeight,
// })
@ -295,18 +321,19 @@ async function handleSelection(e: MouseEvent) {
let uuid = target.getAttribute('data-uuid')
if (uuid !== '-1' && !dAltDown.value) {
let widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
if (!widget || !dActiveElement.value) return
if (widget.parent !== '-1' && widget.parent !== dActiveElement.value.uuid && widget.parent !== dActiveElement.value.parent) {
uuid = widget.parent
uuid = widget.parent || null
}
}
// 设置选中元素
// this.$store.commit('setMoveable', false)
if (showRotatable.value !== false) {
store.dispatch('selectWidget', {
uuid: uuid,
widgetStore.selectWidget({
uuid: uuid || " -1",
})
// selectWidget({
// store.dispatch('selectWidget', {
// uuid: uuid,
// })
}
@ -316,21 +343,21 @@ async function handleSelection(e: MouseEvent) {
}
} else {
// 取消选中元素
store.dispatch('selectWidget', {
uuid: '-1',
widgetStore.selectWidget({
uuid: "-1"
})
// selectWidget({
// store.dispatch('selectWidget', {
// uuid: '-1',
// })
}
}
function getlayers() {
return dWidgets.value.filter((item: { parent: string }) => item.parent === dPage.value.uuid)
return dWidgets.value.filter((item) => item.parent === dPage.value.uuid)
}
function getChilds(uuid: string) {
return dWidgets.value.filter((item: { parent: string }) => item.parent === uuid)
return dWidgets.value.filter((item) => item.parent === uuid)
}
// getIsActive(uuid) {
// if (this.dSelectWidgets.length > 0) {

4
src/components/modules/layout/lineGuides.vue
View File

@ -11,7 +11,7 @@
<script lang="ts" setup>
import { watch } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import Guides, { GuideOptions } from '@scena/guides'
import { useCanvasStore } from '@/pinia';
@ -35,7 +35,7 @@ const props = withDefaults(defineProps<TProps>(), {
show: false
})
const store = useStore()
// const store = useStore()
const canvasStore = useCanvasStore()
const container = 'page-design' // page-design out-page
let guidesTop: TGuidesData | null = null

19
src/components/modules/layout/zoomControl/index.vue
View File

@ -20,17 +20,17 @@
</template>
<script lang="ts" setup>
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import addMouseWheel from '@/common/methods/addMouseWheel'
import { OtherList, TZoomData, ZoomList } from './data';
import { useSetupMapGetters } from '@/common/hooks/mapGetters';
// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useCanvasStore, usePageStore } from '@/pinia';
import { useCanvasStore, useForceStore, usePageStore } from '@/pinia';
const route = useRoute()
const store = useStore()
// const store = useStore()
// 组件大小控制器
let holder: number | undefined
@ -48,9 +48,10 @@ const otherIndex = ref(-1)
const bestZoom = ref(0)
const curAction = ref('')
const { zoomScreenChange } = useSetupMapGetters(['zoomScreenChange'])
// const { zoomScreenChange } = useSetupMapGetters(['zoomScreenChange'])
const canvasStore = useCanvasStore()
const { dPage } = storeToRefs(usePageStore())
const { zoomScreenChange } = storeToRefs(useForceStore())
const { dZoom, dScreen } = storeToRefs(canvasStore)
@ -141,11 +142,11 @@ function changeScreen() {
holder = setTimeout(() => {
const screen = document.getElementById('page-design')
if (!screen) return
store.dispatch('updateScreen', {
canvasStore.updateScreen({
width: screen.offsetWidth,
height: screen.offsetHeight,
})
// updateScreen({
// store.dispatch('updateScreen', {
// width: screen.offsetWidth,
// height: screen.offsetHeight,
// })
@ -264,7 +265,9 @@ async function autoFixTop() {
padding += presetPadding / 2
}
curAction.value === 'add' && (padding -= presetPadding)
store.commit('updatePaddingTop', padding > 0 ? padding : 0)
canvasStore.updatePaddingTop(padding > 0 ? padding : 0)
// store.commit('updatePaddingTop', padding > 0 ? padding : 0)
}
defineExpose({

33
src/components/modules/panel/components/layerList.vue
View File

@ -39,8 +39,10 @@
</template>
<script lang="ts">
import { useWidgetStore } from '@/pinia'
import { TdWidgetData } from '@/pinia/design/widget'
import { defineComponent, computed, reactive, ref, toRefs } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import draggable from 'vuedraggable'
export default defineComponent({
@ -48,8 +50,9 @@ export default defineComponent({
props: ['data'],
emits: ['change'],
setup(props, context) {
let widgets: any = ref([])
const state: any = reactive({
const widgetStore = useWidgetStore()
let widgets = ref<TdWidgetData[]>([])
const state = reactive<{drag: boolean}>({
drag: false,
})
const dragOptions = computed(() => {
@ -61,7 +64,7 @@ export default defineComponent({
}
})
const store = useStore()
// const store = useStore()
// const dPage = computed(() => {
// return store.getters.dPage
// })
@ -98,24 +101,26 @@ export default defineComponent({
return widgets
}
const getIsActive = (uuid: number) => {
if (store.getters.dSelectWidgets.length > 0) {
let widget = store.getters.dSelectWidgets.find((item: any) => item.uuid === uuid)
const getIsActive = (uuid: string) => {
if (widgetStore.dSelectWidgets.length > 0) {
let widget = widgetStore.dSelectWidgets.find((item) => item.uuid === uuid)
if (widget) {
return true
}
return false
} else {
return uuid === store.getters.dActiveElement.uuid
return uuid === widgetStore.dActiveElement?.uuid
}
}
const selectLayer = (widget: any) => {
// console.log(widget)
store.dispatch('selectWidget', { uuid: widget.uuid })
widgetStore.selectWidget({ uuid: widget.uuid })
// store.dispatch('selectWidget', { uuid: widget.uuid })
}
const hoverLayer = ({ uuid, parent }: any) => {
store.dispatch('updateHoverUuid', uuid)
widgetStore.updateHoverUuid(uuid)
// store.dispatch('updateHoverUuid', uuid)
}
const onMove = ({ relatedContext, draggedContext }: any) => {
@ -133,12 +138,18 @@ export default defineComponent({
}
// 锁定图层
const lockLayer = (item: any) => {
store.dispatch('updateWidgetData', {
widgetStore.updateWidgetData({
uuid: item.uuid,
key: 'lock',
value: typeof item.lock === 'undefined' ? true : !item.lock,
pushHistory: false,
})
// store.dispatch('updateWidgetData', {
// uuid: item.uuid,
// key: 'lock',
// value: typeof item.lock === 'undefined' ? true : !item.lock,
// pushHistory: false,
// })
// item.lock = typeof item.lock === 'undefined' ? true : !item.lock
}

58
src/components/modules/panel/stylePanel.vue
View File

@ -9,7 +9,7 @@
<el-button plain type="primary" class="gounp__btn" @click="handleCombine">成组</el-button>
<icon-item-select label="" :data="iconList" @finish="alignAction" />
</div>
<component :is="dActiveElement.type + '-style'" v-show="!showGroupCombined" v-if="dActiveElement.type" />
<component :is="dActiveElement?.type + '-style'" v-show="!showGroupCombined" v-if="dActiveElement?.type" />
</div>
<div v-show="activeTab === 1" class="layer-wrap">
<layer-list :data="dWidgets" @change="layerChange" />
@ -20,21 +20,28 @@
<script setup lang="ts">
// 样式设置面板
// const NAME = 'style-panel'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import alignIconList, { AlignListData } from '@/assets/data/AlignListData'
import iconItemSelect, { TIconItemSelectData } from '../settings/iconItemSelect.vue'
import { ref, watch } from 'vue';
import { useSetupMapGetters } from '@/common/hooks/mapGetters';
import { useControlStore } from '@/pinia';
// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
import { useControlStore, useGroupStore, useHistoryStore, useWidgetStore } from '@/pinia';
import { storeToRefs } from 'pinia';
import { TdWidgetData } from '@/pinia/design/widget';
import type { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
const store = useStore();
// const store = useStore();
const widgetStore = useWidgetStore()
const controlStore = useControlStore()
const groupStore = useGroupStore()
const historyStore = useHistoryStore()
const activeTab = ref(0)
const iconList = ref<AlignListData[]>(alignIconList)
const showGroupCombined = ref(false)
const { dActiveElement, dWidgets, dSelectWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets'])
// const { dActiveElement, dWidgets, dSelectWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets'])
const { dActiveElement, dWidgets, dSelectWidgets } = storeToRefs(widgetStore)
watch(
dSelectWidgets,
@ -49,31 +56,50 @@ watch(
)
function handleCombine() {
store.dispatch('realCombined')
groupStore.realCombined()
// store.dispatch('realCombined')
}
// ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
function alignAction(item: TIconItemSelectData) {
const sWidgets = JSON.parse(JSON.stringify(dSelectWidgets.value))
store.dispatch('getCombined').then((group) => {
sWidgets.forEach((element: Record<string, any>) => {
store.dispatch('updateAlign', {
align: item.value,
const sWidgets: TdWidgetData[] = JSON.parse(JSON.stringify(dSelectWidgets.value))
groupStore.getCombined().then(group => {
sWidgets.forEach((element) => {
widgetStore.updateAlign({
align: (item.value as TUpdateAlignData['align']),
uuid: element.uuid,
group,
})
// updateAlign({
// store.dispatch('updateAlign', {
// align: item.value,
// uuid: element.uuid,
// group,
// })
});
store.dispatch('pushHistory')
historyStore.pushHistory()
// store.dispatch('pushHistory')
// pushHistory()
})
// store.dispatch('getCombined').then((group) => {
// sWidgets.forEach((element: Record<string, any>) => {
// store.dispatch('updateAlign', {
// align: item.value,
// uuid: element.uuid,
// group,
// })
// // updateAlign({
// // align: item.value,
// // uuid: element.uuid,
// // group,
// // })
// });
// store.dispatch('pushHistory')
// // pushHistory()
// })
}
function layerChange(newLayer: Record<string, any>[]) {
store.commit('setDWidgets', newLayer.toReversed())
function layerChange(newLayer: TdWidgetData[]) {
widgetStore.setDWidgets(newLayer.toReversed())
// store.commit('setDWidgets', newLayer.toReversed())
// store.commit('setShowMoveable', false)
controlStore.setShowMoveable(false)

24
src/components/modules/panel/wrap/BgImgListWrap.vue
View File

@ -25,10 +25,10 @@
<script lang="ts" setup>
import { reactive, computed } from 'vue'
import api from '@/api'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { ElImage } from 'element-plus'
import { TGetImageListResult } from '@/api/material';
import { usePageStore } from '@/pinia';
import { usePageStore, useWidgetStore } from '@/pinia';
type TCommonPanelData = {
color: string
@ -56,8 +56,9 @@ type TState = {
const { model } = defineProps<TProps>()
const store = useStore()
// const store = useStore()
const pageStore = usePageStore()
const widgetStore = useWidgetStore()
const state = reactive<TState>({
loading: false,
@ -125,9 +126,12 @@ function setBGcolor(color: string) {
value: color,
pushHistory: true
})
store.dispatch('selectWidget', {
uuid: '-1',
widgetStore.selectWidget({
uuid: '-1'
})
// store.dispatch('selectWidget', {
// uuid: '-1',
// })
}
async function selectItem(item: TGetImageListResult) {
@ -141,13 +145,17 @@ async function selectItem(item: TGetImageListResult) {
value: item.url,
pushHistory: true,
})
store.dispatch('selectWidget', {
uuid: '-1',
widgetStore.selectWidget({
uuid: '-1'
})
// store.dispatch('selectWidget', {
// uuid: '-1',
// })
}
function dragStart(_: MouseEvent, _item: TGetImageListResult) {
store.commit('selectItem', { data: {}, type: 'bg' })
widgetStore.setSelectItem({ data: {}, type: 'bg' })
// store.commit('selectItem', { data: {}, type: 'bg' })
}

41
src/components/modules/panel/wrap/CompListWrap.vue
View File

@ -55,12 +55,12 @@
<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import api from '@/api'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
import DragHelper from '@/common/hooks/dragHelper'
import setItem2Data from '@/common/methods/DesignFeatures/setImage'
import { TGetCompListResult, TGetTempDetail, TTempDetail } from '@/api/home'
import { useControlStore, usePageStore } from '@/pinia'
import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
type TState = {
loading: boolean
@ -88,8 +88,9 @@ const state = reactive<TState>({
types: [],
showList: [],
})
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const dPage = usePageStore().dPage
const pageOptions = { type: 1, page: 0, pageSize: 20 }
@ -188,9 +189,11 @@ const dragStart = async (e: MouseEvent, { id, width, height, cover }: TGetCompLi
dragHelper.start(e, img.canvasWidth)
tempDetail = await getCompDetail({ id, type: 1 })
if (Array.isArray(JSON.parse(tempDetail.data))) {
store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'group' })
widgetStore.setSelectItem({ data: JSON.parse(tempDetail.data), type: 'group' })
// store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'group' })
} else {
store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'text' })
widgetStore.setSelectItem({ data: JSON.parse(tempDetail.data), type: 'text' })
// store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'text' })
}
}
@ -216,26 +219,28 @@ const selectItem = async (item: TGetCompListResult) => {
element.left += (pW - parent.width) / 2
element.top += (pH - parent.height) / 2
})
store.dispatch('addGroup', group)
widgetStore.addGroup(group)
// store.dispatch('addGroup', group)
} else {
group.text && (group.text = decodeURIComponent(group.text))
group.left = pW / 2 - group.fontSize * (group.text.length / 2)
group.top = pH / 2 - group.fontSize / 2
store.dispatch('addWidget', group)
widgetStore.addGroup(group)
// store.dispatch('addWidget', group)
}
}
function getCompDetail(params: TGetTempDetail): Promise<TTempDetail> {
// 有缓存则直接返回组件数据，否则请求获取数据
return new Promise((resolve) => {
if (compsCache[params.id]) {
resolve(compsCache[params.id])
} else api.home.getTempDetail(params).then((res: any) => {
resolve(res)
compsCache[params.id] = res // 缓存请求的组件数据
})
})
}
function getCompDetail(params: TGetTempDetail): Promise<TTempDetail> {
// 有缓存则直接返回组件数据，否则请求获取数据
return new Promise((resolve) => {
if (compsCache[params.id]) {
resolve(compsCache[params.id])
} else api.home.getTempDetail(params).then((res: any) => {
resolve(res)
compsCache[params.id] = res // 缓存请求的组件数据
})
})
}
defineExpose({
load,

15
src/components/modules/panel/wrap/GraphListWrap.vue
View File

@ -44,11 +44,11 @@ import api from '@/api'
// import wImage from '../../widgets/wImage/wImage.vue'
import wImageSetting from '../../widgets/wImage/wImageSetting'
import wSvg from '../../widgets/wSvg/wSvg.vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import setImageData from '@/common/methods/DesignFeatures/setImage'
import DragHelper from '@/common/hooks/dragHelper'
import { TGetListData } from '@/api/material'
import { useControlStore, usePageStore } from '@/pinia'
import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
import { storeToRefs } from 'pinia'
type TProps = {
@ -82,8 +82,9 @@ const props = defineProps<TProps>()
const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const { dPage } = storeToRefs(usePageStore())
const state = reactive<TState>({
@ -213,15 +214,17 @@ async function selectItem(item: TGetListData) {
if (item.type === 'mask') {
setting.mask = item.url
}
store.dispatch('addWidget', setting)
widgetStore.addWidget(setting)
// store.dispatch('addWidget', setting)
}
async function dragStart(e: MouseEvent, item: TGetListData) {
startPoint = { x: e.x, y: e.y }
const { width, height, thumb, url } = item
const img = await setImageData({ width, height, url: thumb || url })
dragHelper.start(e, img.canvasWidth)
store.commit('selectItem', { data: { value: item }, type: item.type })
// this.$store.commit('selectItem', { data: { value: item }, type: item.type })
widgetStore.setSelectItem({ data: { value: item }, type: item.type })
// store.commit('selectItem', { data: { value: item }, type: item.type })
}
</script>

15
src/components/modules/panel/wrap/PhotoListWrap.vue
View File

@ -31,10 +31,10 @@ import { toRefs, reactive, computed, onMounted } from 'vue'
// import wImage from '../../widgets/wImage/wImage.vue'
import wImageSetting from '../../widgets/wImage/wImageSetting'
import api from '@/api'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import setImageData from '@/common/methods/DesignFeatures/setImage'
import { storeToRefs } from 'pinia'
import { useControlStore, usePageStore } from '@/pinia'
import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
import { TGetImageListResult } from '@/api/material'
type TProps = {
@ -57,8 +57,9 @@ type TCurrentCategory = {
const props = defineProps<TProps>()
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const { dPage } = storeToRefs(usePageStore())
const state = reactive<TState>({
@ -96,7 +97,9 @@ const selectImg = async (index: number, list: TGetImageListResult[]) => {
const { width: pW, height: pH } = dPage.value
setting.left = pW / 2 - img.width / 2
setting.top = pH / 2 - img.height / 2
store.dispatch('addWidget', setting)
widgetStore.addWidget(setting)
// store.dispatch('addWidget', setting)
}
const getDataList = async () => {
@ -114,7 +117,9 @@ const getDataList = async () => {
const dragStart = (index: number, list: TGetImageListResult[]) => {
const item = list ? list[index] : state.recommendImgList[index]
store.commit('selectItem', { data: { value: item }, type: 'image' })
widgetStore.setSelectItem({ data: { value: item }, type: 'image' })
// store.commit('selectItem', { data: { value: item }, type: 'image' })
}
const searchChange = (e: Event) => {

28
src/components/modules/panel/wrap/TempListWrap.vue
View File

@ -23,16 +23,16 @@
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import api from '@/api'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { LocationQueryValue, useRoute, useRouter } from 'vue-router'
// import chooseType from './components/chooseType.vue'
// import editModel from './components/editModel.vue'
import searchHeader from './components/searchHeader.vue'
import useConfirm from '@/common/methods/confirm'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import imgWaterFall from './components/imgWaterFall.vue'
import { IGetTempListData } from '@/api/home'
import {useControlStore, usePageStore, useUserStore, useHistoryStore} from '@/pinia'
import {useControlStore, usePageStore, useUserStore, useHistoryStore, useWidgetStore, useForceStore} from '@/pinia'
import { storeToRefs } from 'pinia'
type TState = {
@ -54,11 +54,13 @@ const listRef = ref<HTMLElement | null>(null)
const route = useRoute()
const router = useRouter()
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const userStore = useUserStore()
const pageStore = usePageStore()
const widgetStore = useWidgetStore()
const forceStore = useForceStore()
const state = reactive<TState>({
loading: false,
loadDone: false,
@ -67,7 +69,7 @@ const state = reactive<TState>({
searchKeyword: '',
})
const { tempEditing } = useSetupMapGetters(['tempEditing'])
// const { tempEditing } = useSetupMapGetters(['tempEditing'])
const { dHistoryParams } = storeToRefs(useHistoryStore())
const pageOptions: TPageOptions = { page: 0, pageSize: 20, cate: 1 }
@ -130,7 +132,9 @@ async function selectItem(item: IGetTempListData) {
}
// store.commit('managerEdit', false)
userStore.managerEdit(false)
store.commit('setDWidgets', [])
widgetStore.setDWidgets([])
// store.commit('setDWidgets', [])
setTempId(item.id)
@ -146,15 +150,19 @@ async function selectItem(item: IGetTempListData) {
pageStore.setDPage(page)
// store.commit('setDPage', page)
store.dispatch('setTemplate', widgets)
widgetStore.setTemplate(widgets)
// store.dispatch('setTemplate', widgets)
// setTemplate(widgets)
setTimeout(() => {
store.commit('zoomScreenChange')
forceStore.setZoomScreenChange()
// store.commit('zoomScreenChange')
}, 300)
store.dispatch('selectWidget', {
widgetStore.selectWidget({
uuid: '-1'
})
// store.dispatch('selectWidget', {
// uuid: '-1'
// })
// selectWidget({
// uuid: '-1',
// })

11
src/components/modules/panel/wrap/TextListWrap.vue
View File

@ -28,8 +28,8 @@ import { storeToRefs } from 'pinia';
// import wText from '../../widgets/wText/wText.vue'
import { wTextSetting } from '../../widgets/wText/wTextSetting'
import { useStore } from 'vuex'
import { useControlStore, usePageStore } from '@/pinia';
// import { useStore } from 'vuex'
import { useControlStore, usePageStore, useWidgetStore } from '@/pinia';
type TBasicTextData = {
text: string
@ -37,8 +37,9 @@ type TBasicTextData = {
fontWeight: string
}
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const { dPage } = storeToRefs(usePageStore())
@ -56,7 +57,9 @@ const selectBasicText = (item: TBasicTextData) => {
const { width: pW, height: pH } = dPage.value
setting.left = pW / 2 - item.fontSize * 3
setting.top = pH / 2 - item.fontSize / 2
store.dispatch('addWidget', setting)
widgetStore.addWidget(setting)
// store.dispatch('addWidget', setting)
}
// const dragStart = (_: MouseEvent, item: any) => {

13
src/components/modules/panel/wrap/ToolsListWrap.vue
View File

@ -26,22 +26,23 @@
// const NAME = 'tool-list-wrap'
// import api from '@/api'
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
// import wQrcode from '../../widgets/wQrcode/wQrcode.vue'
import imageCutout from '@/components/business/image-cutout'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
import { storeToRefs } from 'pinia'
import { useControlStore, usePageStore } from '@/pinia'
import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const route = useRoute()
const loadDone = ref(false)
const imageCutoutRef = ref<typeof imageCutout | null>(null)
const widgetStore = useWidgetStore()
const { dPage } = storeToRefs(usePageStore())
onMounted(() => {
@ -70,7 +71,9 @@ function addQrcode() {
const { width: pW, height: pH } = dPage.value
setting.left = pW / 2 - setting.width / 2
setting.top = pH / 2 - setting.height / 2
store.dispatch('addWidget', setting)
widgetStore.addWidget(setting)
// store.dispatch('addWidget', setting)
// addWidget(setting)
}

14
src/components/modules/panel/wrap/UserWrap.vue
View File

@ -39,7 +39,7 @@
import { reactive, toRefs, watch, nextTick, ref, onMounted } from 'vue'
import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import uploader from '@/components/common/Uploader'
import api from '@/api'
// import wImage from '../../widgets/wImage/wImage.vue'
@ -53,7 +53,7 @@ import { TUploadDoneData } from '@/components/common/Uploader/index.vue'
import { IGetTempListData } from '@/api/home'
import eventBus from '@/utils/plugins/eventBus'
import { storeToRefs } from 'pinia'
import { useControlStore, usePageStore } from '@/pinia'
import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
type TProps = {
active?: number
@ -73,8 +73,9 @@ const props = defineProps<TProps>()
const router = useRouter()
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const { dPage } = storeToRefs(usePageStore())
const listRef = ref<HTMLElement | null>(null)
@ -177,7 +178,9 @@ const selectImg = async (index: number) => {
const { width: pW, height: pH } = dPage.value
setting.left = pW / 2 - img.width / 2
setting.top = pH / 2 - img.height / 2
store.dispatch('addWidget', setting)
widgetStore.addWidget(setting)
// store.dispatch('addWidget', setting)
}
type controlImgParam = {
@ -228,7 +231,8 @@ state.editOptions = {
const dragStart = (index: number) => {
const item = state.imgList[index]
store.commit('selectItem', { data: { value: item }, type: 'image' })
widgetStore.setSelectItem({ data: { value: item }, type: 'image' })
// store.commit('selectItem', { data: { value: item }, type: 'image' })
}
const uploadDone = async (res: TUploadDoneData) => {
await api.material.addMyPhoto(res)

4
src/components/modules/settings/colorSelect.vue
View File

@ -17,7 +17,7 @@
<script lang="ts" setup>
import {reactive, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import colorPicker from '@palxp/color-picker'
import { useControlStore } from '@/pinia';
@ -53,7 +53,7 @@ const props = withDefaults(defineProps<TProps>(), {
const emit = defineEmits<TEmits>()
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const state = reactive<TState>({

1
src/components/modules/settings/numberSlider.vue
View File

@ -21,7 +21,6 @@
<script lang="ts" setup>
// const NAME = 'number-slider'
import { watch, ref, onMounted } from 'vue';
import { mapActions } from 'vuex'
type TProps = {
label?: string

2
src/components/modules/settings/valueSelect.vue
View File

@ -39,7 +39,7 @@
<div :class="['input-wrap', { active: state.inputBorder }]" :style="{ width: inputWidth }">
<!-- <img v-if="innerPreview" class="preview" :src="innerPreview" /> -->
<input
:style="{ fontFamily: modelValue.value }"
:style="{ fontFamily: (modelValue as Record<string, any>).value }"
:class="['real-input', { disable: !disable }]"
:readonly="readonly" type="text"
:value="showValue"

26
src/components/modules/widgets/pageStyle.vue
View File

@ -38,7 +38,7 @@
// 画布组件样式
// const NAME = 'page-style'
import { nextTick, onMounted, reactive, watch } from 'vue'
import { mapGetters, mapActions, useStore } from 'vuex'
// import { mapGetters, mapActions, useStore } from 'vuex'
import numberInput from '../settings/numberInput.vue'
import colorSelect, { colorChangeData } from '../settings/colorSelect.vue'
import uploader, { TUploadDoneData } from '@/components/common/Uploader/index.vue'
@ -47,9 +47,10 @@ import _dl from '@/common/methods/download'
// import ColorPipette from '@/utils/plugins/color-pipette'
import Tabs from '@palxp/color-picker/comps/Tabs.vue'
import TabPanel from '@palxp/color-picker/comps/TabPanel.vue'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { usePageStore } from '@/pinia'
import { TPageStore } from '@/pinia/design/page'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { usePageStore, useWidgetStore } from '@/pinia'
import { TPageState, } from '@/pinia/design/page'
import { storeToRefs } from 'pinia'
type TState = {
activeNames: string[]
@ -62,8 +63,9 @@ type TState = {
showBgLib: boolean
}
const store = useStore()
// const store = useStore()
const pageStore = usePageStore()
const widgetStore = useWidgetStore()
const state = reactive<TState>({
activeNames: ['1', '2', '3', '4'],
innerElement: {},
@ -74,7 +76,8 @@ const state = reactive<TState>({
modes: ['颜色', '图片'],
showBgLib: false
})
const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
// const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
const { dActiveElement } = storeToRefs(widgetStore)
let _localTempBG: string | null = null
watch(
@ -126,12 +129,15 @@ function changeValue() {
return
}
for (let key in state.innerElement) {
if (key !== 'setting' && key !== 'record' && state.innerElement[key] !== dActiveElement.value[key]) {
if (
key !== 'setting' && key !== 'record' &&
state.innerElement[key] !== (dActiveElement.value as Record<string, any>)[key]
) {
if (state.ingoreKeys.indexOf(key) !== -1) {
dActiveElement.value[key] = state.innerElement[key]
(dActiveElement.value as Record<string, any>)[key] = state.innerElement[key]
} else {
pageStore.updatePageData({
key: key as keyof TPageStore,
key: key as keyof TPageState,
value: state.innerElement[key],
})
}
@ -139,7 +145,7 @@ function changeValue() {
}
}
function finish(key: keyof TPageStore, value: string | number) {
function finish(key: keyof TPageState, value: string | number) {
pageStore.updatePageData({
key: key,
value: value,

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

@ -26,11 +26,13 @@
// 组合组件
const NAME = 'w-group'
import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { setTransformAttribute } from '@/common/methods/handleTransform'
import { useSetupMapGetters } from '@/common/hooks/mapGetters';
import { useWidgetStore } from '@/pinia';
import { storeToRefs } from 'pinia';
// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
type TParamsData = {
export type TParamsData = {
left: number
top: number
width: number
@ -50,7 +52,9 @@ const props = withDefaults(defineProps<TProps>(), {
params: () => ({}),
parent: () => ({})
})
const store = useStore();
// const store = useStore();
const widgetStore = useWidgetStore()
const widget = ref<HTMLElement | null>(null)
const ratio = ref(0)
const temp = ref<Record<string, any>>({})
@ -77,7 +81,8 @@ const compWidgetsRecord = ref<Record<string, any>>({})
// }
const timer = ref<number | null>(null)
const { dActiveElement, dWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
// const { dActiveElement, dWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
// watch: {
// params: {
@ -111,19 +116,19 @@ onBeforeUnmount(() => {
// ...mapActions(['updateWidgetData']),
function updateRecord(tempScale ?: number) {
if (dActiveElement.value.uuid === props.params.uuid) {
if (dActiveElement.value?.uuid === props.params.uuid) {
// clearTimeout(this.timer)
let record = dActiveElement.value.record
if (record.width <= 0) {
let record = dActiveElement.value?.record
if (record?.width <= 0) {
touchend()
}
// if (this.tempRecord && this.tempRecord.width && this.tempRecord.width != record.width) {
// return
// }
ratio.value = tempScale || (props.params.width || 0) / record.width
ratio.value = tempScale || (props.params.width || 0) / record?.width
if (ratio.value != 1) {
if (record.width != 0) {
if (record?.width != 0) {
for (let i = dWidgets.value.length - 1; i >= 0; --i) {
if (dWidgets.value[i].parent === props.params.uuid) {
temp.value[dWidgets.value[i].uuid] = { width: dWidgets.value[i].width * ratio.value, height: dWidgets.value[i].height * ratio.value, raw: dWidgets.value[i] }
@ -145,7 +150,7 @@ function updateRecord(tempScale ?: number) {
}
function touchstart() {
if (dActiveElement.value.uuid !== props.params.uuid) {
if (dActiveElement.value?.uuid !== props.params.uuid) {
return
}
const tempRecord = {
@ -167,7 +172,7 @@ function touchstart() {
}
function touchend() {
if (dActiveElement.value.uuid !== props.params.uuid) {
if (dActiveElement.value?.uuid !== props.params.uuid) {
return
}
// const opacity = this.$refs.widget.style.opacity
@ -204,9 +209,9 @@ function touchend() {
}
// this.$refs.widget.style.opacity = opacity
temp.value = {}
if (!dActiveElement.value) return
if (dActiveElement.value.uuid === props.params.uuid) {
let record = dActiveElement.value.record
let record = dActiveElement.value?.record
record.width = widget.value?.offsetWidth
record.height = widget.value?.offsetHeight
dActiveElement.value.width = widget.value?.offsetWidth
@ -215,13 +220,13 @@ function touchend() {
}, 10)
}
function keyChange(uuid: string, key: keyof TParamsData, value: number) {
store.dispatch('updateWidgetData', {
widgetStore.updateWidgetData({
uuid,
key,
value,
pushHistory: false,
})
// updateWidgetData({
// store.dispatch('updateWidgetData', {
// uuid,
// key,
// value,
@ -231,8 +236,9 @@ function keyChange(uuid: string, key: keyof TParamsData, value: number) {
function keySetValue(uuid: string, key: keyof TParamsData, value: number) {
setTimeout(() => {
const widget = dWidgets.value.find((item: TParamsData) => item.uuid === uuid)
widget[key] = value + Number(props.params[key] || '')
const widget = dWidgets.value.find((item) => item.uuid === uuid)
if (!widget) return
(widget[key] as Number) = value + Number(props.params[key] || '')
}, 10)
}

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

@ -17,8 +17,13 @@
</div>
</el-collapse-item>
<el-collapse-item title="样式设置" name="2">
<el-button plain type="primary" class="block-btn" @click="store.dispatch('ungroup', state.innerElement.uuid)">取消组合</el-button>
<!-- <div class="ungroup style-item" @click="ungroup(innerElement.uuid)">取消组合</div> -->
<!-- <el-button plain type="primary" class="block-btn" @click="store.dispatch('ungroup', state.innerElement.uuid)">取消组合</el-button> -->
<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)" />
<br />
<icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
@ -32,14 +37,19 @@
// 组合组件样式
// const NAME = 'w-group-style'
import { reactive, watch } from 'vue'
import { mapGetters, mapActions, useStore } from 'vuex'
// import { mapGetters, mapActions, useStore } from 'vuex'
import numberInput from '../../settings/numberInput.vue'
import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
import numberSlider from '../../settings/numberSlider.vue'
import layerIconList from '@/assets/data/LayerIconList'
import alignIconList from '@/assets/data/AlignListData'
import { wGroupSetting } from './groupSetting'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useWidgetStore } from '@/pinia'
import { storeToRefs } from 'pinia'
import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
import { TupdateLayerIndexData } from '@/pinia/design/widget/actions/layer'
import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
type TState = {
activeNames: string[],
@ -60,8 +70,10 @@ const state = reactive<TState>({
layerIconList,
alignIconList,
})
const store = useStore()
const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
// const store = useStore()
const widgetStore = useWidgetStore()
// const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
const { dActiveElement } = storeToRefs(widgetStore)
let dMoving = false
@ -109,17 +121,17 @@ function changeValue() {
for (let key in state.innerElement) {
const itemKey = key as keyof typeof wGroupSetting
if (state.ingoreKeys.indexOf(itemKey) !== -1) {
dActiveElement.value[itemKey] = state.innerElement[itemKey]
} else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
store.dispatch("updateWidgetData", {
uuid: dActiveElement.value.uuid,
key: key,
value: 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]) {
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "",
key: (key as TUpdateWidgetPayload['key']),
value: (state.innerElement[itemKey] as TUpdateWidgetPayload['value']),
})
// this.updateWidgetData({
// uuid: this.dActiveElement.uuid,
// store.dispatch("updateWidgetData", {
// uuid: dActiveElement.value?.uuid,
// key: key,
// value: this.innerElement[key],
// value: state.innerElement[itemKey],
// })
}
}
@ -127,14 +139,14 @@ function changeValue() {
function finish(key: string, value: string | number | number[]) {
store.dispatch("updateWidgetData", {
uuid: dActiveElement.value.uuid,
key: key,
value: value,
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "",
key: key as TUpdateWidgetPayload['key'],
value: value as TUpdateWidgetPayload['value'],
pushHistory: true,
})
// this.updateWidgetData({
// uuid: this.dActiveElement.uuid,
// store.dispatch("updateWidgetData", {
// uuid: dActiveElement.value.uuid,
// key: key,
// value: value,
// pushHistory: true,
@ -142,23 +154,27 @@ function finish(key: string, value: string | number | number[]) {
}
function layerAction(item: TIconItemSelectData) {
store.dispatch("updateLayerIndex", {
uuid: dActiveElement.value.uuid,
value: item.value,
widgetStore.updateLayerIndex({
uuid: dActiveElement.value?.uuid || "",
value: (item.value as TupdateLayerIndexData['value']),
isGroup: true,
})
// this.updateLayerIndex({
// uuid: this.dActiveElement.uuid,
// store.dispatch("updateLayerIndex", {
// uuid: dActiveElement.value.uuid,
// value: item.value,
// isGroup: true,
// })
}
function alignAction(item: TIconItemSelectData) {
store.dispatch("updateAlign", {
align: item.value,
uuid: dActiveElement.value.uuid,
widgetStore.updateAlign({
align: (item.value as TUpdateAlignData['align']),
uuid: dActiveElement.value?.uuid || "",
})
// store.dispatch("updateAlign", {
// align: item.value,
// uuid: dActiveElement.value.uuid,
// })
}
</script>

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

@ -35,14 +35,14 @@
// 图片组件
// const NAME = 'w-image'
import { CSSProperties, StyleValue, computed, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue'
import { mapGetters, mapActions, useStore } from 'vuex'
// import { mapGetters, mapActions, useStore } from 'vuex'
import { getMatrix } from '@/common/methods/handleTransform'
import setting from "./wImageSetting"
import PointImg from '@/utils/plugins/pointImg'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useCanvasStore, useControlStore } from '@/pinia'
import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/pinia'
type TProps = {
params: typeof setting
@ -83,20 +83,26 @@ const state = reactive<TState>({
})
const route = useRoute()
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const forceStore = useForceStore()
const widgetRef = ref<HTMLElement | null>(null)
const targetRef = ref<HTMLImageElement | null>(null)
let rotateTemp: number | null = null
let flipTemp: string | null = null
let locksTemp: string[] | null = null
let locksTemp: boolean[] | null = null
const {
dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
// const {
// dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
// } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
const { dZoom } = storeToRefs(useCanvasStore())
const {
dActiveElement, dWidgets, dMouseXY, dDropOverUuid
} = storeToRefs(widgetStore)
const { dCropUuid } = storeToRefs(controlStore)
// ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
const cropEdit = computed(() => {
@ -137,7 +143,8 @@ watch(
onUpdated(() => {
updateRecord()
store.commit('updateRect')
forceStore.setUpdateRect()
// store.commit('updateRect')
})
onMounted(async () => {
@ -218,8 +225,8 @@ function move(payload?: MouseEvent) {
}
function updateRecord() {
if (dActiveElement.value.uuid === props.params.uuid) {
let record = dActiveElement.value.record
if (dActiveElement.value?.uuid === props.params.uuid) {
let record = dActiveElement.value?.record
if (widgetRef.value) {
record.width = widgetRef.value.offsetWidth
record.height = widgetRef.value.offsetHeight
@ -247,14 +254,14 @@ function setTransform(attrName: string, value: string | number) {
} else {
setValue = props.params.transform + ` ${attrName}(${value})`
}
store.dispatch("updateWidgetData", {
widgetStore.updateWidgetData({
uuid: props.params.uuid,
key: 'transform',
value: setValue,
pushHistory: false,
})
// updateWidgetData({
// uuid: this.params.uuid,
// store.dispatch("updateWidgetData", {
// uuid: props.params.uuid,
// key: 'transform',
// value: setValue,
// pushHistory: false,
@ -317,7 +324,7 @@ function lockOthers() {
} else {
locksTemp = []
for (const widget of dWidgets.value) {
locksTemp.push(widget.lock)
locksTemp.push(widget?.lock || false)
}
dWidgets.value.forEach((widget: any) => {
widget.uuid != props.params.uuid && (widget.lock = true)

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

@ -72,7 +72,7 @@
// 图片组件样式
// const NAME = 'w-image-style'
import { nextTick, reactive, ref, watch, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import numberInput from '../../settings/numberInput.vue'
import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
import numberSlider from '../../settings/numberSlider.vue'
@ -86,11 +86,14 @@ import layerIconList from '@/assets/data/LayerIconList'
import alignIconList from '@/assets/data/AlignListData'
import picBox from '@/components/business/picture-selector'
import imageCutout from '@/components/business/image-cutout'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import wImageSetting, { TImageSetting } from './wImageSetting'
import { TGetImageListResult } from '@/api/material'
import { storeToRefs } from 'pinia'
import { useControlStore } from '@/pinia'
import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/pinia'
import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
import { TupdateLayerIndexData } from '@/pinia/design/widget/actions/layer'
import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
type TState = {
picBoxShow: boolean
@ -132,15 +135,17 @@ const state = reactive<TState>({
const picBoxRef = ref<typeof picBox | null>(null)
const imageCutoutRef = ref<typeof imageCutout | null>(null)
const store = useStore()
const {
dActiveElement, dWidgets
} = useSetupMapGetters(['dActiveElement', 'dWidgets'])
// const store = useStore()
const widgetStore = useWidgetStore()
const forceStore = useForceStore()
const canvasStore = useCanvasStore()
// const {
// dActiveElement, dWidgets
// } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
const controlStore = useControlStore()
const { dMoving } = storeToRefs(controlStore)
// computed: {
// ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
// },
const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
let lastUuid: string | undefined = undefined
let tag: boolean
@ -155,6 +160,7 @@ watch(
() => dActiveElement.value,
(newValue, oldValue) => {
change()
if (!newValue) return
// 失焦取消编辑模式
if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
imgCrop(false)
@ -196,34 +202,38 @@ function changeValue() {
}
for (let key in state.innerElement) {
if (state.ingoreKeys.indexOf(key) !== -1) {
dActiveElement.value[key] = state.innerElement[(key as keyof TImageSetting)]
} else if (key !== 'cropEdit' && key !== 'record' && state.innerElement[(key as keyof TImageSetting)] !== dActiveElement.value[key]) {
store.dispatch('updateWidgetData', {
uuid: dActiveElement.value.uuid,
key: key,
value: state.innerElement[(key as keyof TImageSetting)],
(dActiveElement.value as Record<string, any>)[key] = state.innerElement[(key as keyof TImageSetting)]
} else if (
key !== 'cropEdit' && key !== 'record' &&
state.innerElement[(key as keyof TImageSetting)] !== (dActiveElement.value as Record<string, any>)[key]
) {
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "",
key: (key as TUpdateWidgetPayload['key']),
value: (state.innerElement[(key as keyof TImageSetting)] as TUpdateWidgetPayload['value']),
})
// updateWidgetData({
// uuid: this.dActiveElement.uuid,
// store.dispatch('updateWidgetData', {
// uuid: dActiveElement.value.uuid,
// key: key,
// value: this.innerElement[key],
// value: state.innerElement[(key as keyof TImageSetting)],
// })
}
}
}
function finishSliceData(key: string, value: number | number[]) {
if (!dActiveElement.value) return
const data = dActiveElement.value.sliceData
if (data) {
data[key] = value
store.dispatch('updateWidgetData', {
widgetStore.updateWidgetData({
uuid: dActiveElement.value.uuid,
key: 'sliceData',
value: data,
pushHistory: true,
})
// updateWidgetData({
// uuid: dActiveElement.uuid,
// store.dispatch('updateWidgetData', {
// uuid: dActiveElement.value.uuid,
// key: 'sliceData',
// value: data,
// pushHistory: true,
@ -232,14 +242,14 @@ function finishSliceData(key: string, value: number | number[]) {
}
function finish(key: string = "", value: string | number | (string | number)[] | null = "") {
store.dispatch('updateWidgetData', {
uuid: dActiveElement.value.uuid,
key: key,
value: value,
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "",
key: (key as TUpdateWidgetPayload['key']),
value: value as TUpdateWidgetPayload['value'],
pushHistory: true,
})
// this.updateWidgetData({
// uuid: this.dActiveElement.uuid,
// store.dispatch('updateWidgetData', {
// uuid: dActiveElement.value.uuid,
// key: key,
// value: value,
// pushHistory: true,
@ -248,30 +258,31 @@ function finish(key: string = "", value: string | number | (string | number)[] |
function layerAction(item: TIconItemSelectData) {
if (item.key === 'zIndex') {
store.dispatch("updateLayerIndex", {
uuid: dActiveElement.value.uuid,
value: item.value,
widgetStore.updateLayerIndex({
uuid: dActiveElement.value?.uuid || "",
value: (item.value as TupdateLayerIndexData['value']),
})
// this.updateLayerIndex({
// uuid: this.dActiveElement.uuid,
// store.dispatch("updateLayerIndex", {
// uuid: dActiveElement.value.uuid,
// value: item.value,
// })
} 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) {
store.dispatch("updateAlign", {
align: item.value,
uuid: dActiveElement.value.uuid,
widgetStore.updateAlign({
align: (item.value as TUpdateAlignData['align']),
uuid: dActiveElement.value?.uuid || "",
})
// this.updateAlign({
// store.dispatch("updateAlign", {
// align: item.value,
// uuid: this.dActiveElement.uuid,
// uuid: dActiveElement.value.uuid,
// })
await nextTick()
store.commit('updateRect')
forceStore.setUpdateRect()
// store.commit('updateRect')
}
function openCropper() {
@ -311,8 +322,8 @@ function openCropper() {
async function selectDone(img: TGetImageListResult) {
state.innerElement.imgUrl = img.url
const loadImg = await getImage(img.url)
state.innerElement.width = loadImg.width * store.getters.dZoom / 100
state.innerElement.height = loadImg.height * store.getters.dZoom / 100
state.innerElement.width = loadImg.width * canvasStore.dZoom / 100
state.innerElement.height = loadImg.height * canvasStore.dZoom / 100
// this.imgCrop(true)
}
@ -331,7 +342,8 @@ function imgCrop(val: boolean) {
function cropHandle() {
store.commit('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)
}
// 图库选择器

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

@ -35,12 +35,14 @@
// 图片组件
// const NAME = 'w-qrcode'
import { mapGetters, mapActions, useStore } from 'vuex'
// import { mapGetters, mapActions, useStore } from 'vuex'
import QRCode from '@/components/business/qrcode'
import { TWQrcodeSetting } from './wQrcodeSetting';
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 { useForceStore, useWidgetStore } from '@/pinia';
import { storeToRefs } from 'pinia';
type TProps = {
params: TWQrcodeSetting & {
@ -57,12 +59,15 @@ type TState = {
qrCodeOptions: Options
}
const store = useStore()
// const store = useStore()
const forceStore = useForceStore()
const widgetStore = useWidgetStore()
const props = defineProps<TProps>()
const state = reactive<TState>({
qrCodeOptions: {}
})
const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
// const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
const { dActiveElement } = storeToRefs(widgetStore)
const width = computed(() => Number(props.params.width))
const widgetRef = ref<HTMLElement | null>(null)
@ -76,7 +81,8 @@ watch(
onUpdated(() => {
updateRecord()
store.commit('updateRect')
forceStore.setUpdateRect()
// store.commit('updateRect')
})
onMounted(async () => {
@ -88,8 +94,8 @@ onMounted(async () => {
})
// ...mapActions(['updateWidgetData']),
function updateRecord() {
if (dActiveElement.value.uuid === props.params.uuid) {
let record = dActiveElement.value.record
if (dActiveElement.value?.uuid === props.params.uuid) {
let record = dActiveElement.value?.record
if (!widgetRef.value) return
record.width = widgetRef.value.offsetWidth
record.height = widgetRef.value.offsetHeight

86
src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
View File

@ -58,7 +58,7 @@
// 图片组件样式
// const NAME = 'w-image-style'
import { nextTick, reactive, watch } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { ElSelect, ElOption } from 'element-plus'
import numberInput from '../../settings/numberInput.vue'
import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
@ -72,9 +72,11 @@ import uploader, { TUploadDoneData } from '@/components/common/Uploader/index.vu
import layerIconList from '@/assets/data/LayerIconList'
import alignIconList from '@/assets/data/AlignListData'
import { wQrcodeSetting, TWQrcodeSetting } from './wQrcodeSetting'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { storeToRefs } from 'pinia'
import { useControlStore } from '@/pinia'
import { useControlStore, useForceStore, useWidgetStore } from '@/pinia'
import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
type TState = {
activeNames: string[]
@ -96,15 +98,17 @@ const state = reactive<TState>({
localization,
})
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const forceStore = useForceStore()
const {
dActiveElement, dWidgets
} = useSetupMapGetters(['dActiveElement', 'dWidgets'])
// const {
// dActiveElement, dWidgets
// } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
const { dMoving } = storeToRefs(useControlStore())
// ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
let lastUuid: string | null = null
@ -112,16 +116,17 @@ watch(
() => dActiveElement.value,
(newValue, oldValue) => {
change()
if (!newValue) return
// 失焦取消编辑模式
if (newValue.uuid == -1) {
if (Number(newValue.uuid) == -1) {
state.innerElement.cropEdit = false
store.dispatch("updateWidgetData", {
uuid: lastUuid,
widgetStore.updateWidgetData({
uuid: lastUuid ?? "",
key: 'cropEdit',
value: false,
})
// this.updateWidgetData({
// uuid: this.lastUuid,
// store.dispatch("updateWidgetData", {
// uuid: lastUuid,
// key: 'cropEdit',
// value: false,
// })
@ -163,31 +168,34 @@ function changeValue() {
for (let key in state.innerElement) {
const itemKey = key as keyof TWQrcodeSetting
if (state.ingoreKeys.indexOf(key) !== -1) {
dActiveElement.value[itemKey] = state.innerElement[itemKey]
} else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
store.dispatch("updateWidgetData", {
uuid: dActiveElement.value.uuid,
key: key,
value: 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]
) {
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "",
key: key as TUpdateWidgetPayload['key'],
value: state.innerElement[itemKey] as TUpdateWidgetPayload['value'],
})
// this.updateWidgetData({
// uuid: this.dActiveElement.uuid,
// store.dispatch("updateWidgetData", {
// uuid: dActiveElement.value.uuid,
// key: key,
// value: this.innerElement[key],
// value: state.innerElement[itemKey],
// })
}
}
}
function finish(key: string, value: number | number[] | string) {
store.dispatch("updateWidgetData", {
uuid: dActiveElement.value.uuid,
key: key,
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || '',
key: key as TUpdateWidgetPayload['key'],
value: value,
pushHistory: true,
})
// this.updateWidgetData({
// uuid: this.dActiveElement.uuid,
// store.dispatch("updateWidgetData", {
// uuid: dActiveElement.value.uuid,
// key: key,
// value: value,
// pushHistory: true,
@ -196,27 +204,29 @@ function finish(key: string, value: number | number[] | string) {
function layerAction(item: TIconItemSelectData) {
console.log(item)
store.dispatch("updateLayerIndex", {
uuid: dActiveElement.value.uuid,
value: item.value,
widgetStore.updateLayerIndex({
uuid: dActiveElement.value?.uuid || "",
value: item.value as number,
})
// this.updateLayerIndex({
// uuid: this.dActiveElement.uuid,
// store.dispatch("updateLayerIndex", {
// uuid: dActiveElement.value.uuid,
// value: item.value,
// })
}
async function alignAction(item: TIconItemSelectData) {
store.dispatch("updateAlign", {
align: item.value,
uuid: dActiveElement.value.uuid,
widgetStore.updateAlign({
align: item.value as TUpdateAlignData['align'],
uuid: dActiveElement.value?.uuid || "",
})
// this.updateAlign({
// store.dispatch("updateAlign", {
// align: item.value,
// uuid: this.dActiveElement.uuid,
// uuid: dActiveElement.value.uuid,
// })
await nextTick()
store.commit('updateRect')
forceStore.setUpdateRect()
// store.commit('updateRect')
}
async function uploadImgDone(img: TUploadDoneData) {

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

@ -20,10 +20,13 @@
<script lang="ts" setup>
// svg
// const NAME = 'w-svg'
import { mapGetters, mapActions, useStore } from 'vuex'
// import { mapGetters, mapActions, useStore } from 'vuex'
import { useCanvasStore, useForceStore, useWidgetStore } from '@/pinia';
import { TWSvgSetting } from './wSvgSetting'
import { CSSProperties, computed, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, watch } from 'vue';
import { useSetupMapGetters } from '@/common/hooks/mapGetters';
import { storeToRefs } from 'pinia';
import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget';
// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
type TProps = {
params: TWSvgSetting
@ -55,11 +58,15 @@ const state = reactive<TState>({
attrRecord: {}, // 记录可更改的属性
svgImg: null
})
const store = useStore()
// ...mapGetters(['dActiveElement', 'dZoom', 'dMouseXY']),
const {
dActiveElement, dZoom, dMouseXY
} = useSetupMapGetters(['dActiveElement', 'dZoom', 'dMouseXY'])
// const store = useStore()
const widgetStore = useWidgetStore()
const canvasStore = useCanvasStore()
const forceStore = useForceStore()
// const {
// dActiveElement, dZoom, dMouseXY
// } = useSetupMapGetters(['dActiveElement', 'dZoom', 'dMouseXY'])
const { dZoom } = storeToRefs(canvasStore)
const { dActiveElement, dMouseXY } = storeToRefs(widgetStore)
const widgetRef = ref<HTMLElement | null>(null)
@ -116,7 +123,8 @@ watch(
onUpdated(() => {
updateRecord()
store.commit('updateRect')
forceStore.setUpdateRect()
// store.commit('updateRect')
})
onMounted(async () => {
@ -272,7 +280,7 @@ function color2obj() {
}
function updateRecord() {
if (dActiveElement.value.uuid === props.params.uuid) {
if (dActiveElement.value?.uuid === props.params.uuid) {
let record = dActiveElement.value.record
if (widgetRef.value) {
record.width = widgetRef.value.offsetWidth
@ -311,14 +319,14 @@ function updateZoom() {
}
function changeFinish(key: string, value: number) {
store.dispatch("updateWidgetData", {
widgetStore.updateWidgetData({
uuid: props.params.uuid,
key: key,
key: key as TUpdateWidgetPayload['key'],
value: value,
pushHistory: true,
})
// this.updateWidgetData({
// uuid: this.params.uuid,
// store.dispatch("updateWidgetData", {
// uuid: props.params.uuid,
// key: key,
// value: value,
// pushHistory: true,
@ -336,7 +344,7 @@ function move(payload: Record<string, any>) {
}
function attrsChange() {
if (dActiveElement.value.uuid === props.params.uuid && svgElements) {
if (dActiveElement.value?.uuid === props.params.uuid && svgElements) {
for (const element of svgElements) {
const { item, attrsColor } = element
for (const key in attrsColor) {

69
src/components/modules/widgets/wSvg/wSvgStyle.vue
View File

@ -37,7 +37,7 @@
// 图片组件样式
// const NAME = 'w-image-style'
import { reactive, watch } from 'vue'
import { mapGetters, mapActions, useStore } from 'vuex'
// import { mapGetters, mapActions, useStore } from 'vuex'
import numberInput from '../../settings/numberInput.vue'
import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
import numberSlider from '../../settings/numberSlider.vue'
@ -45,9 +45,11 @@ import colorSelect from '../../settings/colorSelect.vue'
import layerIconList from '@/assets/data/LayerIconList'
import alignIconList from '@/assets/data/AlignListData'
import { TWSvgSetting, wSvgSetting } from './wSvgSetting'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { storeToRefs } from 'pinia'
import { useControlStore } from '@/pinia'
import { useControlStore, useWidgetStore } from '@/pinia'
import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
type TState = {
activeNames: string[]
@ -66,11 +68,13 @@ const state = reactive<TState>({
layerIconList,
alignIconList,
})
const store = useStore()
const {
dActiveElement
} = useSetupMapGetters(['dActiveElement'])
// const store = useStore()
const widgetStore = useWidgetStore()
// const {
// dActiveElement
// } = useSetupMapGetters(['dActiveElement'])
const { dMoving } = storeToRefs(useControlStore())
const { dActiveElement } = storeToRefs(widgetStore)
// ...mapGetters(['dActiveElement', 'dMoving']),
@ -114,17 +118,20 @@ function changeValue() {
for (let key in state.innerElement) {
const itemKey = key as keyof TWSvgSetting
if (state.ingoreKeys.indexOf(itemKey) !== -1) {
dActiveElement.value[key] = state.innerElement[itemKey]
} else if (itemKey !== 'setting' && itemKey !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
store.dispatch("updateWidgetData", {
uuid: dActiveElement.value.uuid,
key: key,
value: state.innerElement[itemKey],
(dActiveElement.value as Record<string, any>)[key] = state.innerElement[itemKey]
} else if (
itemKey !== 'setting' && itemKey !== 'record' &&
state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]
) {
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || "",
key: key as TUpdateWidgetPayload['key'],
value: state.innerElement[itemKey] as TUpdateWidgetPayload['value'],
})
// this.updateWidgetData({
// uuid: this.dActiveElement.uuid,
// store.dispatch("updateWidgetData", {
// uuid: dActiveElement.value.uuid,
// key: key,
// value: this.innerElement[key],
// value: state.innerElement[itemKey],
// })
}
}
@ -135,14 +142,14 @@ function colorFinish(key: keyof TWSvgSetting) {
}
function finish(key: string, value: any) {
store.dispatch("updateWidgetData", {
uuid: dActiveElement.value.uuid,
key: key,
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || '',
key: key as TUpdateWidgetPayload['key'],
value: value,
pushHistory: true,
})
// this.updateWidgetData({
// uuid: this.dActiveElement.uuid,
// store.dispatch("updateWidgetData", {
// uuid: dActiveElement.value.uuid,
// key: key,
// value: value,
// pushHistory: true,
@ -150,24 +157,24 @@ function finish(key: string, value: any) {
}
function layerAction(item: TIconItemSelectData) {
store.dispatch("updateLayerIndex", {
uuid: dActiveElement.value.uuid,
value: item.value,
widgetStore.updateLayerIndex({
uuid: dActiveElement.value?.uuid || '',
value: Number(item.value),
})
// this.updateLayerIndex({
// uuid: this.dActiveElement.uuid,
// store.dispatch("updateLayerIndex", {
// uuid: dActiveElement.value.uuid,
// value: item.value,
// })
}
function alignAction(item: TIconItemSelectData) {
store.dispatch("updateAlign", {
align: item.value,
uuid: dActiveElement.value.uuid,
widgetStore.updateAlign({
align: item.value as TUpdateAlignData['align'],
uuid: dActiveElement.value?.uuid || '',
})
// this.updateAlign({
// store.dispatch("updateAlign", {
// align: item.value,
// uuid: this.dActiveElement.uuid,
// uuid: dActiveElement.value.uuid,
// })
}
</script>

10
src/components/modules/widgets/wText/pageFontsFilter.ts
View File

@ -5,17 +5,19 @@
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-10-14 20:29:26
*/
import store from '@/store'
// import store from '@/store'
import { useWidgetStore } from '@/pinia'
import { toRaw } from 'vue'
export default () => {
const widgetStore = useWidgetStore()
const collector = new Set<string>()
const fonts: Record<string, any> = {}
const { dWidgets: widgets } = store.getters
const { dWidgets: widgets } = widgetStore
for (let i = 0; i < widgets.length; i++) {
const { type, fontClass } = widgets[i]
if (type === 'w-text') {
collector.add(fontClass.id)
fonts[fontClass.id] = toRaw(fontClass)
fontClass && collector.add(fontClass.id)
fontClass && (fonts[fontClass.id] = toRaw(fontClass))
}
}
return Array.from(collector).map((id: string) => fonts[id])

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

@ -60,11 +60,12 @@
// const NAME = 'w-text'
import { reactive, toRefs, computed, onUpdated, watch, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { fontWithDraw } from '@/utils/widgets/loadFontRule'
import getGradientOrImg from './getGradientOrImg'
import { wTextSetting } from './wTextSetting'
import { useForceStore, useHistoryStore, useWidgetStore } from '@/pinia'
export type TwTextParams = {
rotate?: number
@ -83,7 +84,10 @@ type TProps = {
const props = defineProps<TProps>()
const store = useStore()
// const store = useStore()
const widgetStore = useWidgetStore()
const forceStore = useForceStore()
const historyStore = useHistoryStore()
const route = useRoute()
const state = reactive({
loading: false,
@ -93,7 +97,7 @@ const state = reactive({
const widget = ref<HTMLElement | null>(null)
const editWrap = ref<HTMLElement | null>(null)
const dActiveElement = computed(() => store.getters.dActiveElement)
const dActiveElement = computed(() => widgetStore.dActiveElement)
const isDraw = computed(() => route.name === 'Draw' && fontWithDraw)
onUpdated(() => {
@ -142,18 +146,24 @@ watch(
watch(
() => state.editable,
(value) => {
store.dispatch('updateWidgetData', {
uuid: props.params.uuid,
widgetStore.updateWidgetData({
uuid: String(props.params.uuid),
key: 'editable',
value,
pushHistory: false,
})
// store.dispatch('updateWidgetData', {
// uuid: props.params.uuid,
// key: 'editable',
// value,
// pushHistory: false,
// })
},
)
function updateRecord() {
if (!widget.value) return
if (dActiveElement.value.uuid === props.params.uuid) {
if (dActiveElement.value && dActiveElement.value.uuid === String(props.params.uuid)) {
let record = dActiveElement.value.record
record.width = widget.value.offsetWidth
record.height = widget.value.offsetHeight
@ -166,12 +176,18 @@ function updateRecord() {
function updateText(e?: Event) {
const value = e && e.target ? (e.target as HTMLElement).innerHTML : props.params.text//.replace(/\n/g, '<br/>')
if (value !== props.params.text) {
store.dispatch('updateWidgetData', {
uuid: props.params.uuid,
widgetStore.updateWidgetData({
uuid: String(props.params.uuid),
key: 'text',
value,
pushHistory: false,
})
// store.dispatch('updateWidgetData', {
// uuid: props.params.uuid,
// key: 'text',
// value,
// pushHistory: false,
// })
}
}
@ -180,19 +196,27 @@ function writingText(e?: Event) {
// TODO: 修正文字选框高度
const el = editWrap.value || widget.value
if (!el) return
store.dispatch('updateWidgetData', {
uuid: props.params.uuid,
widgetStore.updateWidgetData({
uuid: String(props.params.uuid),
key: 'height',
value: el.offsetHeight,
pushHistory: false,
})
store.commit('updateRect')
// store.dispatch('updateWidgetData', {
// uuid: props.params.uuid,
// key: 'height',
// value: el.offsetHeight,
// pushHistory: false,
// })
forceStore.setUpdateRect()
// store.commit('updateRect')
}
function writeDone(e: Event) {
state.editable = false
setTimeout(() => {
store.dispatch('pushHistory', '文字修改')
historyStore.pushHistory("文字修改")
// store.dispatch('pushHistory', '文字修改')
}, 100)
updateText(e)
}

76
src/components/modules/widgets/wText/wTextStyle.vue
View File

@ -52,7 +52,7 @@
// 文本组件样式
const NAME = 'w-text-style'
import { defineComponent, reactive, toRefs, computed, watch, nextTick, onMounted } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { styleIconList1, styleIconList2, alignIconList, TStyleIconData, TStyleIconData2 } from '@/assets/data/TextIconsData'
import layerIconList from '@/assets/data/LayerIconList'
@ -67,7 +67,9 @@ import { useFontStore } from '@/common/methods/fonts'
import usePageFontsFilter from './pageFontsFilter'
import { wTextSetting ,TwTextData } from './wTextSetting';
import { storeToRefs } from 'pinia';
import { useControlStore } from '@/pinia';
import { useControlStore, useForceStore, useWidgetStore } from '@/pinia';
import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget';
import { TUpdateAlignData } from '@/pinia/design/widget/actions/align';
type TState = {
activeNames: string[],
@ -84,7 +86,9 @@ type TState = {
alignIconList: TIconItemSelectData[],
}
const store = useStore()
// const store = useStore()
const widgetStore = useWidgetStore()
const forceStore = useForceStore()
const route = useRoute()
const state = reactive<TState>({
activeNames: [],
@ -100,7 +104,7 @@ const state = reactive<TState>({
styleIconList2,
alignIconList,
})
const dActiveElement = computed(() => store.getters.dActiveElement)
const dActiveElement = computed(() => widgetStore.dActiveElement)
// const dMoving = computed(() => store.getters.dMoving)
const { dMoving } = storeToRefs(useControlStore())
@ -148,22 +152,32 @@ function changeValue() {
for (let key in state.innerElement) {
const itemKey = key as keyof TwTextData
if (state.ingoreKeys.indexOf(itemKey) !== -1) {
dActiveElement.value[itemKey] = state.innerElement[itemKey]
} else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[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]
) {
// const pushHistory = !['textEffects', 'transformData', 'fontClass'].includes(key)
store.dispatch('updateWidgetData', {
uuid: dActiveElement.value.uuid,
key,
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || '',
key: key as TUpdateWidgetPayload['key'],
value: state.innerElement[itemKey],
pushHistory: false,
})
// store.dispatch('updateWidgetData', {
// uuid: dActiveElement.value.uuid,
// key,
// value: state.innerElement[itemKey],
// pushHistory: false,
// })
}
}
}
function selectTextEffect({ key, value, style }: any) {
const uuid = dActiveElement.value.uuid
store.commit('setWidgetStyle', { uuid, key, value })
const uuid = dActiveElement.value?.uuid || ''
widgetStore.setWidgetStyle({ uuid, key, value })
// store.commit('setWidgetStyle', { uuid, key, value })
if (style) {
finish('color', style.color || '')
}
@ -182,22 +196,32 @@ function loadFonts() {
}
function finish(key: string, value: number | Record<string, any> | string) {
store.dispatch('updateWidgetData', {
uuid: dActiveElement.value.uuid,
key,
widgetStore.updateWidgetData({
uuid: dActiveElement.value?.uuid || '',
key: key as TUpdateWidgetPayload['key'],
value,
pushHistory: false,
})
// store.dispatch('updateWidgetData', {
// uuid: dActiveElement.value.uuid,
// key,
// value,
// pushHistory: false,
// })
setTimeout(() => {
key === 'fontClass' && (state.fontClassList['当前页面'] = usePageFontsFilter())
}, 300)
}
function layerAction(item: TIconItemSelectData) {
store.dispatch('updateLayerIndex', {
uuid: dActiveElement.value.uuid,
value: item.value,
widgetStore.updateLayerIndex({
uuid: dActiveElement.value?.uuid || '',
value: Number(item.value),
})
// store.dispatch('updateLayerIndex', {
// uuid: dActiveElement.value.uuid,
// value: item.value,
// })
}
async function textStyleAction(item: TIconItemSelectData) {
@ -206,16 +230,22 @@ async function textStyleAction(item: TIconItemSelectData) {
// TODO: 对竖版文字的特殊处理
item.key === 'writingMode' && relationChange()
await nextTick()
store.commit('updateRect')
forceStore.setUpdateRect()
// store.commit('updateRect')
}
async function alignAction(item: TIconItemSelectData) {
store.dispatch('updateAlign', {
align: item.value,
uuid: dActiveElement.value.uuid,
widgetStore.updateAlign({
align: item.value as TUpdateAlignData['align'],
uuid: dActiveElement.value?.uuid || '',
})
// store.dispatch('updateAlign', {
// align: item.value,
// uuid: dActiveElement.value.uuid,
// })
await nextTick()
store.commit('updateRect')
forceStore.setUpdateRect()
// store.commit('updateRect')
}
function changeStyleIconList() {
@ -250,7 +280,7 @@ function changeStyleIconList() {
function relationChange() {
setTimeout(() => {
if (dActiveElement.value.writingMode) {
if (dActiveElement.value && dActiveElement.value.writingMode) {
const w_record = dActiveElement.value.width
state.innerElement.width = dActiveElement.value.height
state.innerElement.height = w_record

4
src/main.ts
View File

@ -8,7 +8,7 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import store from './store'
import utils from './utils'
import 'normalize.css/normalize.css'
import '@/assets/styles/index.less'
@ -27,7 +27,7 @@ elementConfig.plugins.forEach((plugin) => {
})
app
.use(store)
// .use(store)
.use(pinia)
.use(router)
.use(utils)

33
src/mixins/methods/dealWithCtrl.ts
View File

@ -5,15 +5,17 @@
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2024-03-15 17:34:51
*/
import store from '@/store'
// import store from '@/store'
import handlePaste from './handlePaste'
import { useHistoryStore } from '@/pinia'
import { useGroupStore, useHistoryStore, useWidgetStore } from '@/pinia'
export default function dealWithCtrl(e: any, _this: any) {
export default function dealWithCtrl(e: KeyboardEvent, _this: any) {
const groupStore = useGroupStore()
switch (e.keyCode) {
case 71: // g
e.preventDefault()
store.dispatch('realCombined')
groupStore.realCombined()
// store.dispatch('realCombined')
break
case 67: // c
copy()
@ -43,8 +45,9 @@ export default function dealWithCtrl(e: any, _this: any) {
* 对组合的子元素某个值进行判断
*/
function checkGroupChild(pid: number | string, key: any) {
const widgetStore = useWidgetStore()
let itHas = false
const childs = store.getters.dWidgets.filter((x: any) => x.parent === pid) || []
const childs = widgetStore.dWidgets.filter((x: any) => x.parent === pid) || []
childs.forEach((element: any) => {
element[key] && (itHas = true)
})
@ -54,24 +57,27 @@ function checkGroupChild(pid: number | string, key: any) {
* 复制元素
*/
function copy() {
if (store.getters.dActiveElement.uuid === '-1') {
const widgetStore = useWidgetStore()
if (widgetStore.dActiveElement?.uuid === '-1') {
return
} else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
} else if (widgetStore.dActiveElement?.isContainer && checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) {
return
}
!store.getters.dActiveElement.editable && store.dispatch('copyWidget')
!widgetStore.dActiveElement?.editable && widgetStore.copyWidget()
// !widgetStore.dActiveElement?.editable && store.dispatch('copyWidget')
}
/**
* 粘贴
*/
function paste() {
handlePaste().then(() => {
if (store.getters.dCopyElement.length === 0) {
const widgetStore = useWidgetStore()
if (widgetStore.dCopyElement.length === 0) {
return
} else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
} else if (widgetStore.dActiveElement?.isContainer && checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) {
return
}
!store.getters.dActiveElement.editable && store.dispatch('pasteWidget')
!widgetStore.dActiveElement?.editable && widgetStore.pasteWidget()
})
}
/**
@ -79,7 +85,7 @@ function paste() {
*/
function undo(shiftKey: any) {
const historyStore = useHistoryStore()
console.log(store.getters.dHistoryParams);
console.log(historyStore.dHistoryParams);
if (shiftKey) {
if (!(historyStore.dHistoryParams.index === historyStore.dHistoryParams.length - 1)) {
@ -88,6 +94,7 @@ function undo(shiftKey: any) {
}
} else if (historyStore.dHistoryParams.index !== -1) {
// this.handleHistory('undo')
store.dispatch('handleHistory', 'undo')
historyStore.handleHistory('undo')
// store.dispatch('handleHistory', 'undo')
}
}

25
src/mixins/methods/handlePaste.ts
View File

@ -11,7 +11,7 @@
// console.log('主动粘贴', clipdata.getData('text/plain'))
// })
import store from '@/store'
// import store from '@/store'
import api from '@/api'
import Qiniu from '@/common/methods/QiNiu'
import _config from '@/config'
@ -20,18 +20,19 @@ import { getImage } from '@/common/methods/getImgDetail'
import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
import eventBus from '@/utils/plugins/eventBus'
import { useControlStore, usePageStore } from '@/pinia'
import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
// import wText from '@/components/modules/widgets/wText/wText.vue'
export default () => {
return new Promise<void>((resolve) => {
const pageStore = usePageStore()
const widgetStore = useWidgetStore()
const controlStore = useControlStore()
navigator.clipboard
.read()
.then(async (dataTransfer: any) => {
if (store.getters.dActiveElement.editable) {
.then(async (dataTransfer: ClipboardItems) => {
if (widgetStore.dActiveElement?.editable) {
return
}
for (let i = 0; i < dataTransfer.length; i++) {
@ -41,8 +42,8 @@ export default () => {
const file = new File([imageBlob], 'screenshot.png', { type: 'image/png' })
// 上传图片
const qnOptions = { bucket: 'xp-design', prePath: 'user' }
const result: any = await Qiniu.upload(file, qnOptions)
const { width, height }: any = await getImage(file)
const result = await Qiniu.upload(file, qnOptions)
const { width, height } = await getImage(file)
const url = _config.IMG_URL + result.key
await api.material.addMyPhoto({ width, height, url })
// 刷新用户列表
@ -58,7 +59,10 @@ export default () => {
const { width: pW, height: pH } = pageStore.dPage
setting.left = pW / 2 - width / 2
setting.top = pH / 2 - height / 2
store.dispatch('addWidget', setting)
widgetStore.addWidget(setting)
// store.dispatch('addWidget', setting)
// 清空剪贴板，防止多次上传图片
navigator.clipboard.write([
new ClipboardItem({
@ -67,7 +71,8 @@ export default () => {
])
// 最后尝试复制，将图片替换为图片组件
setTimeout(() => {
store.dispatch('copyWidget')
widgetStore.copyWidget()
// store.dispatch('copyWidget')
}, 100)
break
} else if (item.types.toString().indexOf('text') !== -1) {
@ -76,7 +81,9 @@ export default () => {
const setting = JSON.parse(JSON.stringify(wTextSetting))
setting.text = await navigator.clipboard.readText()
store.dispatch('addWidget', setting)
widgetStore.addWidget(setting)
// store.dispatch('addWidget', setting)
break
} else resolve()
}

50
src/mixins/methods/keyCodeOptions.ts
View File

@ -5,12 +5,14 @@
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-11-30 10:09:55
*/
import { useControlStore } from '@/pinia'
import store from '@/store'
import { useControlStore, useWidgetStore } from '@/pinia'
import { TdWidgetData } from '@/pinia/design/widget'
// import store from '@/store'
export default function keyCodeOptions(e: any, params: any) {
const { f } = params
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
switch (e.keyCode) {
case 38:
@ -28,17 +30,22 @@ export default function keyCodeOptions(e: any, params: any) {
case 46:
case 8:
{
if (store.getters.dActiveElement.isContainer) {
if (checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
if (widgetStore.dActiveElement?.isContainer) {
if (checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) {
return
}
}
const { type, editable }: any = store.getters.dActiveElement
if (!widgetStore.dActiveElement) return
const { type, editable } = widgetStore.dActiveElement
if (type === 'w-text') {
// 不在编辑状态则执行删除
!editable && controlStore.showMoveable && store.dispatch('deleteWidget')
} else store.dispatch('deleteWidget')
!editable && controlStore.showMoveable && widgetStore.deleteWidget()
// !editable && controlStore.showMoveable && store.dispatch('deleteWidget')
} else {
widgetStore.deleteWidget()
// store.dispatch('deleteWidget')
}
}
break
}
@ -46,10 +53,11 @@ export default function keyCodeOptions(e: any, params: any) {
/**
* 对组合的子元素某个值进行判断
*/
function checkGroupChild(pid: number | string, key: any) {
function checkGroupChild(pid: number | string, key: keyof TdWidgetData) {
const widgetStore = useWidgetStore()
let itHas = false
const childs = store.getters.dWidgets.filter((x: any) => x.parent === pid) || []
childs.forEach((element: any) => {
const childs = widgetStore.dWidgets.filter((x) => x.parent === pid) || []
childs.forEach((element) => {
element[key] && (itHas = true)
})
return itHas
@ -57,20 +65,28 @@ function checkGroupChild(pid: number | string, key: any) {
/**
* TODO 键盘操作上下左右移动组件
*/
function udlr(type: any, value: any, event: any) {
if (store.getters.dActiveElement.uuid != -1) {
if (store.getters.dActiveElement.editable) {
function udlr(type: keyof TdWidgetData, value: any, event: any) {
const widgetStore = useWidgetStore()
if (!widgetStore.dActiveElement) return
if (Number(widgetStore.dActiveElement.uuid) != -1) {
if (widgetStore.dActiveElement.editable) {
return
} else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
} else if (widgetStore.dActiveElement.isContainer && checkGroupChild(widgetStore.dActiveElement.uuid, 'editable')) {
return
}
event.preventDefault()
const result = Number(store.getters.dActiveElement[type]) + value
store.dispatch('updateWidgetData', {
uuid: store.getters.dActiveElement.uuid,
const result = Number(widgetStore.dActiveElement[type]) + value
widgetStore.updateWidgetData({
uuid: widgetStore.dActiveElement.uuid,
key: type,
value: result,
})
// store.dispatch('updateWidgetData', {
// uuid: store.getters.dActiveElement.uuid,
// key: type,
// value: result,
// })
// TODO: 键盘移位需要防抖入栈
// timer = setTimeout(() => {
// this.pushHistory()

52
src/mixins/move.ts
View File

@ -5,22 +5,29 @@
* @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-07-31 09:31:52
*/
import { useControlStore } from '@/pinia'
import store from '@/store'
import { useControlStore, useWidgetStore } from '@/pinia'
// import store from '@/store'
const move = {
methods: {
initmovement(e: any) {
// let target = store.state.pageDesign.dActiveElement
const target = store.getters.dActiveElement
const widgetStore = useWidgetStore()
const target = widgetStore.dActiveElement
if (!target) return
// 设置移动状态初始值
store.dispatch('initDMove', {
widgetStore.initDMove({
startX: e.pageX,
startY: e.pageY,
originX: target.left,
originY: target.top,
})
// store.dispatch('initDMove', {
// startX: e.pageX,
// startY: e.pageY,
// originX: target.left,
// originY: target.top,
// })
// 绑定鼠标移动事件
document.addEventListener('mousemove', this.handlemousemove, true)
@ -29,20 +36,27 @@ const move = {
document.addEventListener('mouseup', this.handlemouseup, true)
},
handlemousemove(e: any) {
handlemousemove(e: MouseEvent) {
const widgetStore = useWidgetStore()
e.stopPropagation()
e.preventDefault()
store.dispatch('dMove', {
widgetStore.dMove({
x: e.pageX,
y: e.pageY,
})
// store.dispatch('dMove', {
// x: e.pageX,
// y: e.pageY,
// })
},
handlemouseup() {
const controlStore = useControlStore()
document.removeEventListener('mousemove', this.handlemousemove, true)
document.removeEventListener('mouseup', this.handlemouseup, true)
store.dispatch('stopDMove')
controlStore.stopDMove()
// store.dispatch('stopDMove')
},
},
}
@ -51,23 +65,35 @@ const moveInit = {
methods: {
initmovement(e: MouseEvent) {
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
if (!controlStore.dAltDown) {
// 设置mouseevent给moveable初始
// 在组合操作时排除
store.commit('setMouseEvent', e)
widgetStore.setMouseEvent(e)
// store.commit('setMouseEvent', e)
}
const target = store.getters.dActiveElement
store.dispatch('initDMove', {
const target = widgetStore.dActiveElement
if (!target) return
widgetStore.initDMove({
startX: e.pageX,
startY: e.pageY,
originX: target.left,
originY: target.top,
})
// store.dispatch('initDMove', {
// startX: e.pageX,
// startY: e.pageY,
// originX: target.left,
// originY: target.top,
// })
const handlemouseup = () => {
// 销毁选中即刻移动
store.commit('setMouseEvent', null)
const widgetStore = useWidgetStore()
// 销毁选中即刻移
widgetStore.setMouseEvent(null)
// store.commit('setMouseEvent', null)
document.removeEventListener('mouseup', handlemouseup, true)
}
document.addEventListener('mouseup', handlemouseup, true)

18
src/pinia/design/canvas/index.ts
View File

@ -32,13 +32,6 @@ type TCanvasState = {
guidelines: TGuidelinesData
}
type TStoreGetter = {
dZoom: (state: TCanvasState) => number
dPaddingTop: (state: TCanvasState) => number
dScreen: (state: TCanvasState) => TScreeData
guidelines: (state: TCanvasState) => TGuidelinesData
}
type TStoreAction = {
/** 更新画布缩放百分比 */
updateZoom: (zoom: number) => void
@ -53,7 +46,7 @@ type TStoreAction = {
}
/** 画布全局设置 */
const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>("canvasStore", {
const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("canvasStore", {
state: () => ({
dZoom: 0, // 画布缩放百分比
dPaddingTop: 0, // 画布垂直居中修正值
@ -71,12 +64,6 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor
horizontalGuidelines: [],
},
}),
getters: {
dZoom: state => state.dZoom,
dPaddingTop: state => state.dPaddingTop,
dScreen: state => state.dScreen,
guidelines: state => state.guidelines
},
actions: {
/** 更新画布缩放百分比 */
updateZoom(zoom: number) {
@ -88,6 +75,7 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor
},
/** 更新编辑界面的宽高 */
updateScreen({ width, height }: TScreeData) {
console.log(this.dScreen)
this.dScreen.width = width
this.dScreen.height = height
},
@ -103,6 +91,6 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor
}
})
export type TCanvasStore = Store<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>
export type TCanvasStore = Store<"canvasStore", TCanvasState, {}, TStoreAction>
export default CanvasStore

2
src/pinia/design/group/action/index.ts
View File

@ -20,7 +20,7 @@ export function realCombined(store: TGroupStore) {
const selectWidgets = widgetStore.dSelectWidgets
if (selectWidgets.length > 1) {
const widgets = widgetStore.dWidgets
const group: TdWidgetData = JSON.parse(JSON.stringify(store.dGroupJson))
const group: TdWidgetData = JSON.parse(store.dGroupJson)
group.uuid = nanoid()
widgets.push(group)
let left = Number(pageStore.dPage.width)

5
src/pinia/design/history/actions/pushHistory.ts
View File

@ -8,9 +8,10 @@
import { usePageStore, useWidgetStore } from "@/pinia"
import { THistoryStore } from ".."
import { proxyToObject } from "@/utils/utils"
/** push操作历史记录 */
export function pushHistory(store: THistoryStore, msg: string) {
export function pushHistory(store: THistoryStore, msg: string = "") {
const pageStore = usePageStore()
const selectStore = useWidgetStore()
console.log('history压栈', '来源: ' + msg)
@ -27,7 +28,7 @@ export function pushHistory(store: THistoryStore, msg: string) {
store.dHistoryParams.index = history.length - 1
}
store.dHistory.push(JSON.stringify(selectStore.dWidgets))
store.dPageHistory.push(JSON.stringify(pageStore.dPage))
store.dPageHistory.push(JSON.stringify(proxyToObject(pageStore.dPage)))
store.dHistoryParams.index = history.length - 1
store.dHistoryParams.length = history.length
}

2
src/pinia/design/history/index.ts
View File

@ -35,7 +35,7 @@ type THistoryAction = {
* 修改数据、移动完成后都会自动保存
* 同时会保存当前激活的组件的uuid，方便撤回时自动激活
*/
pushHistory: (msg: string) => void
pushHistory: (msg?: string) => void
/**
* 操作历史记录
* action为undo表示撤销

2
src/pinia/design/widget/actions/align.ts
View File

@ -14,7 +14,7 @@ type TAlign = 'left' | 'ch' | 'right' | 'top' | 'cv' | 'bottom'
export type TUpdateAlignData = {
align: TAlign
uuid: string
group: TdWidgetData
group?: TdWidgetData
}
export function updateAlign(store: TWidgetStore, { align, uuid, group }: TUpdateAlignData) {

4
src/pinia/design/widget/actions/index.ts
View File

@ -25,7 +25,7 @@ export function initDMove(store: TWidgetStore, payload: TInidDMovePayload) {
}
export type TMovePayload = {
donotMove: boolean
donotMove?: boolean
x: number
y: number
}
@ -120,6 +120,6 @@ export function setDropOver(store: TWidgetStore, uuid: string) {
store.dDropOverUuid = uuid
}
export function setMouseEvent(state: TWidgetStore, e: Event | null) {
export function setMouseEvent(state: TWidgetStore, e: MouseEvent | null) {
state.activeMouseEvent = e
}

2
src/pinia/design/widget/actions/layer.ts
View File

@ -12,7 +12,7 @@ import { TWidgetStore, TdWidgetData } from ".."
export type TupdateLayerIndexData = {
uuid: string
value: number
isGroup: boolean
isGroup?: boolean
}
export function updateLayerIndex(store: TWidgetStore, { uuid, value, isGroup }: TupdateLayerIndexData) {

4
src/pinia/design/widget/actions/select.ts
View File

@ -94,8 +94,8 @@ export function selectWidgetsInOut(store: TWidgetStore, { uuid }: TSelectWidgetD
}
export type TselectItem = {
data: Record<string, any>
type: string
data?: Record<string, any>
type?: string
}
export function selectItem(state: TWidgetStore, { data, type }: TselectItem) {

16
src/pinia/design/widget/actions/widget.ts
View File

@ -11,13 +11,13 @@ import { TWidgetStore, TdWidgetData } from ".."
import { customAlphabet } from 'nanoid/non-secure'
const nanoid = customAlphabet('1234567890abcdef', 12)
type TUpdateWidgetKey = 'width' | 'height' | 'left' | 'top'
type TUpdateWidgetKey = keyof TdWidgetData
export type TUpdateWidgetPayload = {
uuid: string
key: TUpdateWidgetKey
value: number
pushHistory: boolean
value: number | string | boolean | Record<string, any>
pushHistory?: boolean
}
/** 更新组件数据 */
@ -38,8 +38,8 @@ export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHi
case 'left':
case 'top':
if (widget.isContainer) {
let dLeft = widget.left - value
let dTop = widget.top - value
let dLeft = widget.left - Number(value)
let dTop = widget.top - Number(value)
if (key === 'left') {
dTop = 0
}
@ -57,7 +57,7 @@ export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHi
}
break
}
widget[key] = value
(widget[key] as TUpdateWidgetPayload['value']) = value
if (pushHistory) {
const historyStore = useHistoryStore()
setTimeout(() => {
@ -75,7 +75,7 @@ export type TUpdateWidgetMultiplePayload = {
key: TUpdateWidgetKey
value: number
}[]
pushHistory: boolean
pushHistory?: boolean
}
/** 一次更新多个widget */
@ -107,7 +107,7 @@ export function updateWidgetMultiple(store: TWidgetStore, { uuid, data, pushHist
}
break
}
widget[key] = value
(widget[key] as number | string) = value
}
}
setTimeout(() => {

26
src/pinia/design/widget/index.ts
View File

@ -19,10 +19,20 @@ import { TUpdateAlignData, updateAlign } from "./actions/align";
import { TWidgetJsonData, widgetJsonData } from "./getter";
import { TupdateLayerIndexData, ungroup, updateLayerIndex } from "./actions/layer";
export type TdWidgetData = TPageState & {
export type TdWidgetData = TPageState & Partial<TCommonItemData> & {
parent?: string
isContainer?: boolean
text?: string
editable?: boolean
lock?: boolean
imgUrl?: string
rotate?: string
transform?: string
sliceData?: Record<string, any>
flip?: boolean
cropEdit?: boolean
fontClass?: Record<string, any>
writingMode?: string
}
export type TWidgetState = {
@ -54,11 +64,11 @@ export type TWidgetState = {
/** 记录多选的组件 */
dSelectWidgets: TdWidgetData[]
/** 复制的组件（可能是单个也可能是数组） */
dCopyElement: TdWidgetData[] | TdWidgetData
dCopyElement: TdWidgetData[]
/** 记录当前选择的元素, data */
selectItem: { data: Record<string, any> | null, type?: string }
selectItem: { data?: Record<string, any> | null, type?: string }
/** 正在活动的鼠标事件 */
activeMouseEvent: Event | null
activeMouseEvent: MouseEvent | null
}
type TGetter = {
@ -80,7 +90,7 @@ type TAction = {
/** 一次更新多个widget */
updateWidgetMultiple: (payload: TUpdateWidgetMultiplePayload) => void
/** addWidget */
addWidget: (setting: TPageState) => void
addWidget: (setting: TdWidgetData) => void
/** addGroup */
addGroup: (group: TdWidgetData[]) => void
/** setTemplate */
@ -102,11 +112,11 @@ type TAction = {
ungroup: (uuid: string) => void
/** 设置拖拽时在哪个图层 */
setDropOver: (uuid: string) => void
selectItem: (data: TselectItem) => void
setSelectItem: (data: TselectItem) => void
resize: (data: TResize) => void
setWidgetStyle: (data: TsetWidgetStyleData) => void
setDWidgets: (data: TdWidgetData[]) => void
setMouseEvent: (e: Event | null) => void
setMouseEvent: (e: MouseEvent | null) => void
}
const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("widgetStore", {
@ -161,7 +171,7 @@ const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("
updateLayerIndex(data) { updateLayerIndex(this, data) },
ungroup(uuid) { ungroup(this, uuid) },
setDropOver(uuid) { setDropOver(this, uuid) },
selectItem(data: TselectItem) { selectItem(this, data) },
setSelectItem(data: TselectItem) { selectItem(this, data) },
resize(data) { resize(this, data) },
setWidgetStyle(data) { setWidgetStyle(this, data) },
setDWidgets(data) { setDWidgets(this, data) },

28
src/utils/utils.ts
View File

@ -78,4 +78,32 @@ export const rndNum = (n: number, m: number) => {
return random
}
/** Proxy 转 Object */
export const proxyToObject = <P extends Record<string, any>>(proxy: P, seen = new WeakMap()): P => {
if (proxy === null || typeof proxy !== 'object') {
return proxy;
}
// 检查是否已经处理过该对象
if (seen.has(proxy)) {
return '[Circular Reference]' as any;
}
let obj: Record<string, any>;
if (Array.isArray(proxy)) {
obj = proxy.map(val => proxyToObject(val, seen)) as any;
} else {
obj = {};
// 将当前对象添加到已处理对象集合
seen.set(proxy, obj);
for (let key in proxy) {
if (proxy.hasOwnProperty(key)) {
obj[key] = proxyToObject(proxy[key], seen);
}
}
}
return obj as P;
};
export default {}

28
src/views/Draw.vue
View File

@ -10,7 +10,7 @@
<script lang="ts" setup>
import { StyleValue, onMounted, reactive, nextTick } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import api from '@/api'
// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
import Preload from '@/utils/plugins/preload'
@ -18,17 +18,17 @@ import FontFaceObserver from 'fontfaceobserver'
import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
import designBoard from '@/components/modules/layout/designBoard/index.vue'
import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useRoute } from 'vue-router'
import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
import { storeToRefs } from 'pinia'
import { usePageStore } from '@/pinia'
import { useGroupStore, usePageStore, useWidgetStore } from '@/pinia'
type TState = {
style: StyleValue
}
const store = useStore()
// const store = useStore()
const route = useRoute()
const state = reactive<TState>({
style: {
@ -36,11 +36,14 @@ const state = reactive<TState>({
},
})
const pageStore = usePageStore()
const groupStore = useGroupStore()
const widgetStore = useWidgetStore()
const { dPage } = storeToRefs(pageStore)
// const { dPage } = useSetupMapGetters(['dPage'])
onMounted(() => {
store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
groupStore.initGroupJson(JSON.stringify(wGroupSetting))
// store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
// initGroupJson(JSON.stringify(wGroup.setting))
nextTick(() => {
load()
@ -64,7 +67,8 @@ async function load() {
dPage.value.width = width
dPage.value.height = height
dPage.value.backgroundColor = '#ffffff00'
store.dispatch('addGroup', content)
widgetStore.addGroup(content)
// store.dispatch('addGroup', content)
// addGroup(content)
} else {
pageStore.setDPage(content.page)
@ -72,11 +76,14 @@ async function load() {
// 移除背景图，作为独立事件
backgroundImage = content.page?.backgroundImage
backgroundImage && delete content.page.backgroundImage
store.commit('setDPage', content.page)
pageStore.setDPage(content.page)
// store.commit('setDPage', content.page)
if (id) {
store.commit('setDWidgets', widgets)
widgetStore.setDWidgets(widgets)
// store.commit('setDWidgets', widgets)
} else {
store.dispatch('setTemplate', widgets)
widgetStore.setTemplate(widgets)
// store.dispatch('setTemplate', widgets)
}
}
@ -118,7 +125,8 @@ async function load() {
if (backgroundImage) {
const preloadBg = new Preload([backgroundImage])
await preloadBg.imgs()
store.commit('setDPage', {...content.page, ...{backgroundImage}})
pageStore.setDPage({...content.page, ...{backgroundImage}})
// store.commit('setDPage', {...content.page, ...{backgroundImage}})
}
try {
fontWithDraw && (await font2style(fontContent, fontData))

27
src/views/Index.vue
View File

@ -58,7 +58,7 @@ import {
CSSProperties, computed, nextTick,
onBeforeUnmount, onMounted, reactive, ref,
} from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
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'
@ -68,11 +68,11 @@ import shortcuts from '@/mixins/shortcuts'
// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
import HeaderOptions from './components/HeaderOptions.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 { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
import { storeToRefs } from 'pinia'
import { useCanvasStore, useControlStore, usePageStore, useHistoryStore } from '@/pinia'
import { useCanvasStore, useControlStore, usePageStore, useHistoryStore, useWidgetStore, useGroupStore } from '@/pinia'
type TState = {
style: CSSProperties
@ -83,13 +83,16 @@ type TState = {
showLineGuides: boolean
}
const {
dActiveElement, dCopyElement
} = useSetupMapGetters(['dActiveElement', 'dCopyElement'])
// const {
// dActiveElement, dCopyElement
// } = useSetupMapGetters(['dActiveElement', 'dCopyElement'])
const widgetStore = useWidgetStore()
const historyStore = useHistoryStore()
const groupStore = useGroupStore()
const { dPage } = storeToRefs(usePageStore())
const { dZoom } = storeToRefs(useCanvasStore())
const { dHistoryParams } = storeToRefs(useHistoryStore())
const { dActiveElement, dCopyElement } = storeToRefs(widgetStore)
const state = reactive<TState>({
@ -105,7 +108,7 @@ const state = reactive<TState>({
})
const optionsRef = ref<typeof HeaderOptions | null>(null)
const zoomControlRef = ref<typeof zoomControl | null>(null)
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const route = useRoute()
@ -159,7 +162,8 @@ let checkCtrl: number | undefined
const instanceFn = { save, zoomAdd, zoomSub }
onMounted(() => {
store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
groupStore.initGroupJson(JSON.stringify(wGroupSetting))
// store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
// initGroupJson(JSON.stringify(wGroup.setting))
window.addEventListener('scroll', fixTopBarScroll)
// window.addEventListener('click', this.clickListener)
@ -199,11 +203,10 @@ function loadData() {
if (!zoomControlRef.value) return
// await nextTick()
// zoomControlRef.value.screenChange()
// 初始化激活的控件为page
store.dispatch('selectWidget', { uuid: '-1' })
// selectWidget({
// uuid: '-1',
// })
widgetStore.selectWidget({ uuid: '-1' })
// store.dispatch('selectWidget', { uuid: '-1' })
})
}

18
src/views/Psd.vue
View File

@ -56,7 +56,7 @@
<script lang="ts" setup>
import { reactive, onMounted, nextTick, onBeforeMount, ref, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
import Moveable from '@/components/business/moveable/Moveable.vue'
import shortcuts from '@/mixins/shortcuts'
@ -71,9 +71,9 @@ import HeaderOptions, { TEmitChangeData } from './components/UploadTemplate.vue'
import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
// import MyWorker from '@/utils/plugins/webWorker'
import { processPSD2Page } from '@/utils/plugins/psd'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
import { useCanvasStore, useControlStore, usePageStore } from '@/pinia'
import { useCanvasStore, useControlStore, usePageStore, useWidgetStore } from '@/pinia'
import { storeToRefs } from 'pinia'
type TState = {
@ -92,7 +92,8 @@ const state = reactive<TState>({
downloadMsg: '',
cancelText: '',
})
const store = useStore()
// const store = useStore()
const widgetStore = useWidgetStore()
const controlStore = useControlStore()
const route = useRoute()
@ -142,7 +143,8 @@ async function loadPSD(file: File) {
const rawData = JSON.parse(JSON.stringify(types[x.type])) || {}
delete x.type
x.src && (x.imgUrl = x.src) && delete x.src
store.dispatch('addWidget', Object.assign(rawData, x))
widgetStore.addWidget(Object.assign(rawData, x))
// store.dispatch('addWidget', Object.assign(rawData, x))
}
const { width, height, background: bg } = data
@ -155,7 +157,8 @@ async function loadPSD(file: File) {
}
async function clear() {
store.commit('setDWidgets', [])
widgetStore.setDWidgets([])
// store.commit('setDWidgets', [])
pageStore.setDPage(Object.assign(pageStore.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
// store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
@ -205,7 +208,8 @@ async function loadDone() {
if (!zoomControlRef.value) return
zoomControlRef.value.screenChange()
setTimeout(() => {
store.dispatch('selectWidget', { uuid: '-1' })
widgetStore.selectWidget({ uuid: '-1' })
// store.dispatch('selectWidget', { uuid: '-1' })
// selectWidget({
// uuid: '-1',
// })

31
src/views/components/HeaderOptions.vue
View File

@ -29,7 +29,7 @@
<script lang="ts" setup>
import api from '@/api'
import { reactive, toRefs, ref } from 'vue'
import { mapGetters, mapActions, useStore } from 'vuex'
// import { mapGetters, mapActions, useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import _dl from '@/common/methods/download'
import useNotification from '@/common/methods/notification'
@ -39,8 +39,8 @@ import copyRight from './CopyRight.vue'
import _config from '@/config'
import useConfirm from '@/common/methods/confirm'
// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useControlStore, useHistoryStore, usePageStore, useUserStore } from '@/pinia/index'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useBaseStore, useControlStore, useHistoryStore, usePageStore, useUserStore, useWidgetStore } from '@/pinia/index'
import { storeToRefs } from 'pinia'
type TProps = {
@ -62,16 +62,23 @@ const props = defineProps<TProps>()
const emit = defineEmits<TEmits>()
const route = useRoute()
const router = useRouter()
const store = useStore()
// const store = useStore()
const userStore = useUserStore()
const widgetStore = useWidgetStore()
const canvasImage = ref<typeof SaveImage | null>(null)
const {
dWidgets, tempEditing
} = useSetupMapGetters(['dWidgets', 'tempEditing'])
// const {
// dWidgets, tempEditing
// } = useSetupMapGetters(['dWidgets', 'tempEditing'])
const pageStore = usePageStore()
const controlStore = useControlStore()
const historyStore = useHistoryStore()
const { dPage } = storeToRefs(pageStore)
const { tempEditing } = storeToRefs(userStore)
const { dWidgets } = storeToRefs(widgetStore)
const { dHistory, dPageHistory } = storeToRefs(useHistoryStore())
@ -111,6 +118,7 @@ async function saveTemp() {
// 保存组件，组合元素要保证在最后一位，才能默认选中
if (dWidgets.value[0].type === 'w-group') {
const group = dWidgets.value.shift()
if (!group) return
group.record.width = 0
group.record.height = 0
dWidgets.value.push(group)
@ -203,15 +211,18 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
// 加载文字组合组件
dPage.value.width = width
dPage.value.height = height
store.dispatch('addGroup', data)
widgetStore.addGroup(data)
// store.dispatch('addGroup', data)
// addGroup(data)
} else {
pageStore.setDPage(data.page)
// store.commit('setDPage', data.page)
id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
id ? widgetStore.setDWidgets(data.widgets) : widgetStore.setTemplate(data.widgets)
// id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
}
cb()
store.dispatch('pushHistory', '请求加载load')
historyStore.pushHistory('请求加载load')
// store.dispatch('pushHistory', '请求加载load')
// pushHistory('请求加载load')
}
}

23
src/views/components/UploadTemplate.vue
View File

@ -14,16 +14,17 @@
<script lang="ts" setup>
import api from '@/api'
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import useNotification from '@/common/methods/notification'
import SaveImage from '@/components/business/save-download/CreateCover.vue'
import { useFontStore } from '@/common/methods/fonts'
import _config from '@/config'
import github from '@/api/github'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useControlStore, usePageStore } from '@/pinia'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
import { storeToRefs } from 'pinia'
import { TdWidgetData } from '@/pinia/design/widget'
type TProps = {
modelValue?: string
@ -48,7 +49,7 @@ type TState = {
loading: false,
}
const { dWidgets } = useSetupMapGetters(['dWidgets'])
// const { dWidgets } = useSetupMapGetters(['dWidgets'])
const { dPage } = storeToRefs(usePageStore())
const props = defineProps<TProps>()
@ -57,8 +58,10 @@ const emit = defineEmits<TEmits>()
const route = useRoute()
const router = useRouter()
const store = useStore()
// const store = useStore()
const widgetStore = useWidgetStore()
const controlStore = useControlStore()
const { dWidgets } = storeToRefs(widgetStore)
const canvasImage = ref<typeof SaveImage | null>(null)
const state = reactive<TState>({
@ -85,8 +88,8 @@ const draw = () => {
let addition = 0 // 累加大小
let lenCount = 0 // 全部大小
let lens = 0 // 任务数
const queue: { type: string, imgUrl: string }[] = [] // 队列
let widgets: { type: string, imgUrl: string }[] = []
const queue: TdWidgetData[] = [] // 队列
let widgets: TdWidgetData[] = []
let page: Record<string, any> = {}
async function prepare() {
@ -105,7 +108,7 @@ async function prepare() {
for (const item of widgets) {
if (item.type === 'w-image') {
lenCount += item.imgUrl.length
lenCount += (item.imgUrl?.length || 0)
queue.push(item)
}
}
@ -117,8 +120,8 @@ async function uploadImgs() {
if (queue.length > 0) {
const item = queue.pop()
if (!item) return
const url = await github.putPic(item.imgUrl.split(',')[1])
addition += item.imgUrl.length
const url = await github.putPic((item?.imgUrl || '').split(',')[1])
addition += (item.imgUrl?.length || 0)
let downloadPercent: number | null = (addition / lenCount) * 100
downloadPercent >= 100 && (downloadPercent = null)
emit('change', { downloadPercent, downloadText: '上传资源中', downloadMsg: `已完成：${lens - queue.length} / ${lens}` })

17
yarn.lock
View File

@ -282,6 +282,13 @@
"@daybrush/utils" "^1.6.0"
framework-utils "^1.1.0"
"@types/cropperjs@^1.3.0":
version "1.3.0"
resolved "https://registry.npmjs.org/@types/cropperjs/-/cropperjs-1.3.0.tgz"
integrity sha512-U3a/z302duKpXUHfMneFjrWDDoq5n+nsJ/YeJHoTI9LXSBtSsqMUyxEJPIMAzfDawF5nuG5c9FN2gY//ZGl5PA==
dependencies:
cropperjs "*"
"@types/estree@^1.0.0", "@types/estree@1.0.5":
version "1.0.5"
resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
@ -778,6 +785,11 @@ core-js@^3.6.5:
resolved "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz"
integrity sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==
cropperjs@*, cropperjs@^1.6.1:
version "1.6.1"
resolved "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.1.tgz"
integrity sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA==
cross-env@^7.0.3:
version "7.0.3"
resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz"
@ -1544,6 +1556,11 @@ minimatch@^9.0.3, minimatch@9.0.3:
dependencies:
brace-expansion "^2.0.1"
mitt@^3.0.1:
version "3.0.1"
resolved "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz"
integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
moveable-helper@^0.4.0:
version "0.4.0"
resolved "https://registry.npmjs.org/moveable-helper/-/moveable-helper-0.4.0.tgz"