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

Merge pull request #113 from JeremyYu-cn/feat-upgrade-vue3

Browse Source 
Merge: feat-pinia branch
This commit is contained in:
Jeremy Yu 2024-03-30 10:21:42 +00:00 committed by GitHub
commit 855e07a2fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
91 changed files with 6334 additions and 2556 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
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",
@ -26,6 +27,7 @@
"moveable-helper": "^0.4.0",
"nanoid": "^3.1.23",
"normalize.css": "^8.0.1",
"pinia": "^2.1.7",
"qr-code-styling": "^1.6.0-rc.1",
"selecto": "^1.13.0",
"throttle-debounce": "^3.0.1",
@ -36,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",
@ -972,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",
@ -1829,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",
@ -3282,6 +3300,56 @@
"node": ">=6"
}
},
"node_modules/pinia": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
"integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
"dependencies": {
"@vue/devtools-api": "^6.5.0",
"vue-demi": ">=0.14.5"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"@vue/composition-api": "^1.4.0",
"typescript": ">=4.4.4",
"vue": "^2.6.14 || ^3.3.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
},
"typescript": {
"optional": true
}
}
},
"node_modules/pinia/node_modules/vue-demi": {
"version": "0.14.7",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
"integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/postcss": {
"version": "8.4.35",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",

6
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",
@ -29,16 +30,17 @@
"moveable-helper": "^0.4.0",
"nanoid": "^3.1.23",
"normalize.css": "^8.0.1",
"pinia": "^2.1.7",
"qr-code-styling": "^1.6.0-rc.1",
"selecto": "^1.13.0",
"throttle-debounce": "^3.0.1",
"vite-plugin-compression": "^0.5.1",
"vue": "3.4.19",
"vue-router": "^4.0.0-0",
"vuedraggable": "^4.1.0",
"vuex": "^4.0.0-0"
"vuedraggable": "^4.1.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 "@/store"
// 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 '@/store'
import { TdWidgetData } from '@/store/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 '@/store'
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
}

6
src/common/methods/DesignFeatures/setWidgetData.ts
View File

@ -8,12 +8,10 @@
// import store from '@/store'
// import { getImage } from '../getImgDetail'
import setImageData from '@/common/methods/DesignFeatures/setImage'
// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
// import wText from '@/components/modules/widgets/wText/wText.vue'
import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
import wImage from '@/components/modules/widgets/wImage/wImage.vue'
// import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
import { wSvgSetting } from '@/components/modules/widgets/wSvg/wSvgSetting'
export default async function(type: string, item: TCommonItemData, data: Record<string, any>) {

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

@ -5,7 +5,8 @@
* @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-02 11:50:00
*/
import store from '@/store'
import { useControlStore } from '@/store'
// import store from '@/store'
type TAddEventCb = (e: Event) => void
type TAddEventObj = {
@ -14,6 +15,7 @@ type TAddEventObj = {
export default function(el: HTMLElement | string, cb: Function, altLimit: boolean = true) {
const box = typeof el === 'string' ? document.getElementById(el) : el
const controlStore = useControlStore()
if (!box) return;
addEvent(box, 'mousewheel', (e: any) => {
const ev = e || window.event
@ -23,7 +25,7 @@ export default function(el: HTMLElement | string, cb: Function, altLimit: boolea
// } else {
// console.log('鼠标滚轮向上++++++++++')
// }
if ((altLimit && store.getters.dAltDown) || !altLimit) {
if ((altLimit && controlStore.dAltDown) || !altLimit) {
ev.preventDefault()
cb(down)
}

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

@ -23,19 +23,21 @@
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 { useControlStore } from '@/store'
export default defineComponent({
components: { ElDialog },
emits: ['done'],
setup(props, context) {
const store = useStore()
// const store = useStore()
const state = reactive({
loading: false,
url: '',
})
const controlStore = useControlStore()
const dialogVisible = ref(false)
const imgBox = ref<HTMLImageElement | any>()
let cropData: any = null
@ -49,7 +51,8 @@ export default defineComponent({
item.rawImg = item.rawImg ? item.rawImg : item.imgUrl
cropData = data
state.url = item.rawImg
store.commit('setShowMoveable', false)
// store.commit('setShowMoveable', false)
controlStore.setShowMoveable(false)
dialogVisible.value = true
await nextTick()
setEdit()
@ -86,7 +89,8 @@ export default defineComponent({
}
const cancel = () => {
store.commit('setShowMoveable', true)
// store.commit('setShowMoveable', true)
controlStore.setShowMoveable(true)
dialogVisible.value = false
state.url = ''
cropData = null

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

@ -23,9 +23,10 @@
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 '@/store'
type TDoneParams = {
newImg: string,
@ -40,7 +41,8 @@ type TOpenItem = {
imgUrl: string
}
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const state = reactive({
loading: false,
url: '',
@ -61,7 +63,8 @@ const open = async (item: TOpenItem, data: Cropper.Data) => {
item.rawImg = item.rawImg ? item.rawImg : item.imgUrl
cropData = data
state.url = item.rawImg
store.commit('setShowMoveable', false)
// store.commit('setShowMoveable', false)
controlStore.setShowMoveable(false)
dialogVisible.value = true
await nextTick()
setEdit()
@ -101,7 +104,8 @@ const ok = () => {
}
const cancel = () => {
store.commit('setShowMoveable', true)
// store.commit('setShowMoveable', true)
controlStore.setShowMoveable(true)
dialogVisible.value = false
state.url = ''
cropData = null

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

@ -41,13 +41,14 @@
<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'
import _dl from '@/common/methods/download'
import ImageExtraction from '../ImageExtraction/index.vue'
import { selectImageFile, uploadCutPhotoToCloud } from './method'
import { useControlStore } from '@/store'
export type TImageCutoutState = {
show: boolean;
@ -61,7 +62,8 @@ export type TImageCutoutState = {
loading: boolean;
}
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const state = reactive<TImageCutoutState>({
show: false,
rawImage: '',
@ -87,7 +89,8 @@ const matting = ref<typeof ImageExtraction | null>(null)
const open = (file: File) => {
state.loading = false
state.show = true
store.commit('setShowMoveable', false)
// store.commit('setShowMoveable', false)
controlStore.setShowMoveable(false)
nextTick(() => {
if (file) {
handleUploaderLoad(file)
@ -111,7 +114,8 @@ const handleUploaderLoad = (file: File) => {
}
const handleClose = () => {
store.commit('setShowMoveable', true)
// store.commit('setShowMoveable', true)
controlStore.setShowMoveable(true)
}
const mousemove = (e: MouseEvent) => {

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
}

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

File diff suppressed because it is too large Load Diff

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 '@/store'
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

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

@ -32,10 +32,11 @@
<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'
import { useControlStore } from '@/store'
type TEmits = (event: 'select', data: TGetImageListResult) => void
@ -49,7 +50,9 @@ type TState = {
const emits = defineEmits<TEmits>()
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const state = reactive<TState>({
dialogVisible: false,
imgList: [],
@ -101,11 +104,13 @@ const loadPic = (init?: boolean) => {
const open = () => {
state.dialogVisible = true
load()
store.commit('setShowMoveable', false)
// store.commit('setShowMoveable', false)
controlStore.setShowMoveable(false)
}
const close = () => {
store.commit('setShowMoveable', true)
// store.commit('setShowMoveable', true)
controlStore.setShowMoveable(true)
}
const selectImg = (index: number, list: TGetImageListResult[]) => {

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'

75
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,15 +23,22 @@ 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, useWidgetStore } from '@/store';
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, dAltDown, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dAltDown', 'dWidgets', 'dCopyElement'])
const widgetStore = useWidgetStore()
// const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
const {dActiveElement, dWidgets, dCopyElement} = storeToRefs(widgetStore)
const { dAltDown } = storeToRefs(useControlStore())
const styleObj = computed(() => {
return {
@ -52,27 +64,30 @@ async function mouseRightClick(e: MouseEvent) {
if (type) {
let uuid = target.getAttribute('data-uuid') // 设置选中元素
if (uuid !== '-1' && !dAltDown) {
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',
@ -105,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()

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

@ -10,14 +10,19 @@
</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 { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { storeToRefs } from 'pinia';
import { useCanvasStore, useWidgetStore } from '@/store';
const store = useStore();
// const store = useStore();
// const { dZoom } = useSetupMapGetters(['dZoom'])
const { dZoom } = useSetupMapGetters(['dZoom'])
const canvasStore = useCanvasStore()
const widgetStore = useWidgetStore()
const { dZoom } = storeToRefs(canvasStore)
// props: ['modelValue'],
@ -26,10 +31,15 @@ const { dZoom } = useSetupMapGetters(['dZoom'])
async function createCover(cb: any) {
const nowZoom = dZoom.value
// 取消选中元素
store.dispatch('selectWidget', {
uuid: '-1',
widgetStore.selectWidget({
uuid: '-1'
})
store.dispatch('updateZoom', 100)
// store.dispatch('selectWidget', {
// uuid: '-1',
// })
canvasStore.updateZoom(100)
// store.dispatch('updateZoom', 100)
const opts = {
useCORS: true, // 跨域图片
@ -51,7 +61,8 @@ async function createCover(cb: any) {
'image/jpeg',
0.15,
)
store.dispatch('updateZoom', nowZoom)
canvasStore.updateZoom(nowZoom)
// store.dispatch('updateZoom', nowZoom)
clonePage.remove()
})
}, 10)

138
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,7 +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, useGroupStore, usePageStore, useWidgetStore } from '@/store'
import { storeToRefs } from 'pinia'
import { TPageState } from '@/store/design/page'
// 页面设计组件
type TProps = {
pageDesignCanvasId: string
@ -80,20 +97,20 @@ type TParentData = {
height?: number
}
type TSetting = {
width?: number
height?: number
top?: number
left?: number
}
type TSetting = Partial<TPageState>
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const canvasStore = useCanvasStore()
const store = useStore()
const { pageDesignCanvasId } = defineProps<TProps>()
const {
dPaddingTop, dPage, dZoom, dScreen, dWidgets,
dActiveElement, dSelectWidgets, dAltDown, dDraging,
dHoverUuid, showRotatable
} = useSetupMapGetters(['dPaddingTop', 'dPage', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
const { dPage } = storeToRefs(usePageStore())
const { dZoom, dPaddingTop, dScreen } = storeToRefs(canvasStore)
const { dDraging, showRotatable, dAltDown } = storeToRefs(controlStore)
const { dWidgets, dActiveElement, dSelectWidgets, dHoverUuid } = storeToRefs(widgetStore)
let _dropIn: string | null = ''
let _srcCache: string | null = ''
@ -116,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
}
@ -129,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')) {
@ -150,17 +171,27 @@ 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')
store.commit('setShowMoveable', false) // 清理上一次的选择
widgetStore.setDropOver("-1")
// store.dispatch('setDropOver', '-1')
// store.commit('setShowMoveable', false) // 清理上一次的选择
controlStore.setShowMoveable(false) // 清理上一次的选择
let lost = eventTarget.className !== 'design-canvas' // className === 'design-canvas' , id: "page-design-canvas"
// e.stopPropagation()
e.preventDefault()
let { data: item, type } = JSON.parse(JSON.stringify(store.getters.selectItem))
let { data: item, type } = JSON.parse(JSON.stringify(widgetStore.selectItem))
// 清除临时数据
store.commit('selectItem', {})
widgetStore.setSelectItem({})
// store.commit('selectItem', {})
let setting: TSetting = {}
if (!type) {
return
@ -184,24 +215,25 @@ async function drop(e: MouseEvent) {
}
})
const half = {
x: parent.width ? (parent.width * store.getters.dZoom) / 100 / 2 : 0,
y: parent.height ? (parent.height * store.getters.dZoom) / 100 / 2 : 0
x: parent.width ? (parent.width * dZoom.value) / 100 / 2 : 0,
y: parent.height ? (parent.height * dZoom.value) / 100 / 2 : 0
}
componentItem.forEach((element) => {
element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / store.getters.dZoom)
element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / store.getters.dZoom)
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)
}
// 设置坐标
const half = {
x: setting.width ? (setting.width * store.getters.dZoom) / 100 / 2 : 0,
y: setting.height ? (setting.height * store.getters.dZoom) / 100 / 2 : 0
x: setting.width ? (setting.width * dZoom.value) / 100 / 2 : 0,
y: setting.height ? (setting.height * dZoom.value) / 100 / 2 : 0
}
// const half = { x: (this.dDragInitData.offsetX * this.dZoom) / 100, y: (this.dDragInitData.offsetY * this.dZoom) / 100 }
setting.left = (lost ? lostX - half.x : e.layerX - half.x) * (100 / store.getters.dZoom)
setting.top = (lost ? lostY - half.y : e.layerY - half.y) * (100 / store.getters.dZoom)
setting.left = (lost ? lostX - half.x : e.layerX - half.x) * (100 / dZoom.value)
setting.top = (lost ? lostY - half.y : e.layerY - half.y) * (100 / dZoom.value)
if (lost && type === 'image') {
// 如果不从画布加入，且不是图片类型，则判断是否加入到svg中
const target = await getTarget(eventTarget)
@ -210,8 +242,11 @@ async function drop(e: MouseEvent) {
const uuid = target.getAttribute('data-uuid')
if (targetType === 'w-mask') {
// 容器
store.commit('setShowMoveable', true) // 恢复选择
// store.commit('setShowMoveable', true) // 恢复选择
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 = {})
@ -220,18 +255,24 @@ 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)
store.commit('setShowMoveable', true) // 恢复选择
// store.commit('setShowMoveable', true) // 恢复选择
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', {})
@ -240,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,
// })
@ -280,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,
// })
}
@ -301,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) {

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

@ -11,8 +11,9 @@
<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 '@/store';
type TProps = {
show: boolean
@ -34,7 +35,8 @@ 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
let guidesLeft: TGuidesData | null = null
@ -47,7 +49,7 @@ watch(
)
watch(
() => store.getters.dZoom,
() => canvasStore.dZoom,
() => {
changeScroll()
},
@ -113,7 +115,7 @@ function render() {
function changeScroll() {
if (guidesTop && guidesLeft) {
const zoom = store.getters.dZoom / 100
const zoom = canvasStore.dZoom / 100
guidesTop.zoom = zoom
guidesLeft.zoom = zoom
if (zoom < 0.9) {

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

@ -20,15 +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, useForceStore, usePageStore } from '@/store';
const route = useRoute()
const store = useStore()
// const store = useStore()
// 组件大小控制器
let holder: number | undefined
@ -46,7 +48,12 @@ const otherIndex = ref(-1)
const bestZoom = ref(0)
const curAction = ref('')
const { dPage, dScreen, zoomScreenChange, dZoom } = useSetupMapGetters(['dPage', 'dScreen', 'zoomScreenChange', 'dZoom'])
// const { zoomScreenChange } = useSetupMapGetters(['zoomScreenChange'])
const canvasStore = useCanvasStore()
const { dPage } = storeToRefs(usePageStore())
const { zoomScreenChange } = storeToRefs(useForceStore())
const { dZoom, dScreen } = storeToRefs(canvasStore)
watch(
activezoomIndex,
@ -75,7 +82,8 @@ watch(
if (realValue === -1) {
realValue = calcZoom()
}
store.dispatch('updateZoom', realValue)
canvasStore.updateZoom(realValue)
// store.dispatch('updateZoom', realValue)
// updateZoom(realValue)
autoFixTop()
}
@ -134,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,
// })
@ -148,7 +156,8 @@ function changeScreen() {
function screenChange() {
// 弹性尺寸即时修改
if (activezoomIndex.value === zoomList.value.length - 1) {
store.dispatch('updateZoom', calcZoom())
canvasStore.updateZoom(calcZoom())
// store.dispatch('updateZoom', calcZoom())
// this.updateZoom(this.calcZoom())
autoFixTop()
}
@ -217,7 +226,8 @@ function sub() {
function mousewheelZoom(down: boolean) {
const value = Number(dZoom.value.toFixed(0))
if (down && value <= 1) return
store.dispatch('updateZoom', down ? value - 1 : value + 1)
canvasStore.updateZoom(down ? value - 1 : value + 1)
// store.dispatch('updateZoom', down ? value - 1 : value + 1)
// updateZoom(down ? value - 1 : value + 1)
zoom.value.text = (value + '%') as any
autoFixTop()
@ -255,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 '@/store'
import { TdWidgetData } from '@/store/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
}

66
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,19 +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 from '../settings/iconItemSelect.vue'
import iconItemSelect, { TIconItemSelectData } from '../settings/iconItemSelect.vue'
import { ref, watch } from 'vue';
import { useSetupMapGetters } from '@/common/hooks/mapGetters';
// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
import { useControlStore, useGroupStore, useHistoryStore, useWidgetStore } from '@/store';
import { storeToRefs } from 'pinia';
import { TdWidgetData } from '@/store/design/widget';
import type { TUpdateAlignData } from '@/store/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,
@ -47,32 +56,53 @@ watch(
)
function handleCombine() {
store.dispatch('realCombined')
groupStore.realCombined()
// store.dispatch('realCombined')
}
// ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
function alignAction(item: AlignListData) {
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,
function alignAction(item: TIconItemSelectData) {
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())
store.commit('setShowMoveable', false)
function layerChange(newLayer: TdWidgetData[]) {
widgetStore.setDWidgets(newLayer.toReversed())
// store.commit('setDWidgets', newLayer.toReversed())
// store.commit('setShowMoveable', false)
controlStore.setShowMoveable(false)
}
</script>

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

@ -25,9 +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, useWidgetStore } from '@/store';
type TCommonPanelData = {
color: string
@ -55,7 +56,10 @@ type TState = {
const { model } = defineProps<TProps>()
const store = useStore()
// const store = useStore()
const pageStore = usePageStore()
const widgetStore = useWidgetStore()
const state = reactive<TState>({
loading: false,
loadDone: false,
@ -113,51 +117,45 @@ const load = async (init: boolean = false) => {
}
function setBGcolor(color: string) {
store.dispatch('updatePageData', {
key: 'backgroundImage',
value: '',
pageStore.updatePageData({
key: "backgroundImage",
value: ''
})
store.dispatch('updatePageData', {
pageStore.updatePageData({
key: 'backgroundColor',
value: color,
pushHistory: true,
pushHistory: true
})
store.dispatch('selectWidget', {
uuid: '-1',
widgetStore.selectWidget({
uuid: '-1'
})
// store.dispatch('selectWidget', {
// uuid: '-1',
// })
}
// ...mapActions(['selectWidget', 'updatePageData']),
async function selectItem(item: TGetImageListResult) {
// this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
store.dispatch('updatePageData', {
pageStore.updatePageData({
key: 'backgroundTransform',
value: {},
})
store.dispatch('updatePageData', {
pageStore.updatePageData({
key: 'backgroundImage',
value: item.url,
pushHistory: true,
})
store.dispatch('selectWidget', {
uuid: '-1',
widgetStore.selectWidget({
uuid: '-1'
})
// this.updatePageData({
// key: 'backgroundTransform',
// value: {},
// })
// this.updatePageData({
// key: 'backgroundImage',
// value: item.url,
// pushHistory: true,
// })
// this.selectWidget({
// 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' })
}

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

@ -55,11 +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, useWidgetStore } from '@/store'
type TState = {
loading: boolean
@ -87,7 +88,10 @@ 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 }
onMounted(async () => {
@ -185,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' })
}
}
@ -195,12 +201,14 @@ const selectItem = async (item: TGetCompListResult) => {
if (isDrag) {
return
}
store.commit('setShowMoveable', false) // 清理掉上一次的选择
// store.commit('setShowMoveable', false) // 清理掉上一次的选择
controlStore.setShowMoveable(false) // 清理掉上一次的选择
tempDetail = tempDetail || (await getCompDetail({ id: item.id, type: 1 }))
// let group = JSON.parse(tempDetail.data)
const group: any = await getComponentsData(tempDetail.data)
let parent: Record<string, any> = { x: 0, y: 0 }
const { width: pW, height: pH } = store.getters.dPage
const { width: pW, height: pH } = dPage
Array.isArray(group) &&
group.forEach((element) => {
@ -211,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,

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

@ -39,28 +39,56 @@
</template>
<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { reactive, toRefs, onMounted } from 'vue'
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 { wSvgSetting } from '../../widgets/wSvg/wSvgSetting'
import { useStore } from 'vuex'
// import wSvg from '../../widgets/wSvg/wSvg.vue'
// import { useStore } from 'vuex'
import setImageData from '@/common/methods/DesignFeatures/setImage'
import DragHelper from '@/common/hooks/dragHelper'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { TGetListData } from '@/api/material'
import { useControlStore, usePageStore, useWidgetStore } from '@/store'
import { storeToRefs } from 'pinia'
type TProps = {
active?: boolean
}
type TState = {
loading: boolean
loadDone: boolean
sub: []
list: TGetListData[]
currentType: Number
currentCheck:number
colors: string[]
currentCategory: TCurrentCategory | null
types: []
showList: TGetListData[][]
searchKeyword: string
}
type TCurrentCategory = {
name: string
id?: number
}
let isDrag = false
let startPoint = { x: 99999, y: 99999 }
const dragHelper = new DragHelper()
const prpos = defineProps<TProps>()
const props = defineProps<TProps>()
const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
const state: any = reactive({
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const { dPage } = storeToRefs(usePageStore())
const state = reactive<TState>({
loading: false,
loadDone: false,
sub: [],
@ -74,10 +102,6 @@ const state: any = reactive({
searchKeyword: '',
})
const pageOptions = { page: 0, pageSize: 20 }
const store = useStore()
const {
dPage
} = useSetupMapGetters(['dPage'])
onMounted(async () => {
if (state.types.length <= 0) {
@ -92,17 +116,19 @@ onMounted(async () => {
}
}
})
// const dragHelper = new DragHelper()
// let isDrag = false
// let startPoint = { x: 99999, y: 99999 }
const mouseup = (e: any) => {
const mouseup = (e: MouseEvent) => {
e.preventDefault()
setTimeout(() => {
isDrag = false
startPoint = { x: 99999, y: 99999 }
}, 10)
}
const mousemove = (e: any) => {
const mousemove = (e: MouseEvent) => {
e.preventDefault()
if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
isDrag = true
@ -134,12 +160,12 @@ const load = async (init: boolean = false) => {
}, 100)
}
const searchChange = (e: any) => {
const searchChange = (_: Event) => {
state.currentCategory = { name: '搜索结果' }
load(true)
}
const selectTypes = (item: any) => {
const selectTypes = (item: TCurrentCategory) => {
state.currentCategory = item
load(true)
}
@ -156,17 +182,20 @@ defineExpose({
mousemove,
})
// ...mapGetters(['dPage'])
// ...mapActions(['addWidget'])
async function selectItem(item: any) {
// computed: {
// ...mapGetters(['dPage']),
// }
// ...mapActions(['addWidget']),
async function selectItem(item: TGetListData) {
if (isDrag) {
return
}
store.commit('setShowMoveable', false) // 清理掉上一次的选择
// store.commit('setShowMoveable', false) // 清理掉上一次的选择
controlStore.setShowMoveable(false) // 清理掉上一次的选择
let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvgSetting)) : JSON.parse(JSON.stringify(wImageSetting))
const img: any = await setImageData(item)
const img = await setImageData(item)
setting.width = img.width
setting.height = img.height // parseInt(100 / item.value.ratio, 10)
@ -186,15 +215,17 @@ async function selectItem(item: any) {
if (item.type === 'mask') {
setting.mask = item.url
}
store.dispatch("addWidget", setting)
// addWidget(setting)
widgetStore.addWidget(setting)
// store.dispatch('addWidget', setting)
}
async function dragStart(e: any, item: any) {
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 })
widgetStore.setSelectItem({ data: { value: item }, type: item.type })
// store.commit('selectItem', { data: { value: item }, type: item.type })
}
</script>

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

@ -3,7 +3,7 @@
* @Date: 2022-02-11 18:48:23
* @Description: 照片图库 Form:Unsplash无版权图片
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-10-04 19:04:39
* @LastEditTime: 2024-03-19 10:04:39
-->
<template>
<div class="wrap">
@ -24,16 +24,18 @@
</div>
</template>
<script lang="ts" setup>
<script setup lang="ts">
// 图片列表
const NAME = 'img-list-wrap'
// const NAME = 'img-list-wrap'
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 { TGetImageListResult } from '@/api/material';
import { storeToRefs } from 'pinia'
import { useControlStore, usePageStore, useWidgetStore } from '@/store'
import { TGetImageListResult } from '@/api/material'
type TProps = {
active?: boolean
@ -41,16 +43,25 @@ type TProps = {
type TState = {
recommendImgList: TGetImageListResult[],
loadDone: boolean,
page: 0,
currentCategory: null | Record<string, any>,
loadDone: boolean
page: number
currentCategory: TCurrentCategory | null,
types: [],
showList: TGetImageListResult[][],
}
type TCurrentCategory = {
name: string
id?: number
}
const props = defineProps<TProps>()
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const { dPage } = storeToRefs(usePageStore())
const state = reactive<TState>({
recommendImgList: [],
loadDone: false,
@ -59,7 +70,6 @@ const state = reactive<TState>({
types: [],
showList: [],
})
const dPage = computed(() => store.getters.dPage)
let loading = false
onMounted(async () => {
@ -75,7 +85,10 @@ onMounted(async () => {
const selectImg = async (index: number, list: TGetImageListResult[]) => {
const item = list ? list[index] : state.recommendImgList[index]
store.commit('setShowMoveable', false) // 清理掉上一次的选择
// store.commit('setShowMoveable', false) // 清理掉上一次的选择
controlStore.setShowMoveable(false) // 清理掉上一次的选择
let setting = JSON.parse(JSON.stringify(wImageSetting))
const img = await setImageData(item) // await getImage(item.url)
setting.width = img.width
@ -84,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 () => {
@ -93,27 +108,29 @@ const getDataList = async () => {
}
loading = true
state.page += 1
if (!state.currentCategory) return
let { list = [], total } = await api.material.getImagesList({ cate: state.currentCategory.id, page: state.page, pageSize: 30 })
let { list = [], total } = await api.material.getImagesList({ cate: state.currentCategory?.id, page: state.page, pageSize: 30 })
list.length <= 0 ? (state.loadDone = true) : (state.recommendImgList = state.recommendImgList.concat(list))
setTimeout(() => {
loading = false
}, 100)
}
const dragStart = (index: number, list?: TGetImageListResult[]) => {
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: Record<string, any>) => {
const searchChange = (e: Event) => {
console.log(e)
}
const selectTypes = (item: Record<string, any>) => {
const selectTypes = (item: TCurrentCategory) => {
state.currentCategory = item
getDataList()
}
const back = () => {
state.currentCategory = null
state.page = 0

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

@ -23,15 +23,17 @@
<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, useWidgetStore, useForceStore} from '@/store'
import { storeToRefs } from 'pinia'
type TState = {
loading: boolean
@ -51,7 +53,14 @@ type TPageOptions = {
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,
@ -60,12 +69,14 @@ const state = reactive<TState>({
searchKeyword: '',
})
const { tempEditing, dHistoryParams } = useSetupMapGetters(['tempEditing', 'dHistoryParams'])
// const { tempEditing } = useSetupMapGetters(['tempEditing'])
const { dHistoryParams } = storeToRefs(useHistoryStore())
const pageOptions: TPageOptions = { page: 0, pageSize: 20, cate: 1 }
const { cate, edit } = route.query
cate && (pageOptions.cate = (cate as LocationQueryValue) || 1)
edit && store.commit('managerEdit', true)
cate && (pageOptions.cate = (cate as LocationQueryValue) ?? 1)
// edit && store.commit('managerEdit', true)
edit && userStore.managerEdit(true)
// onMounted(async () => {})
@ -109,15 +120,21 @@ function checkHeight() {
}
// ...mapActions(['selectWidget', 'updatePageData', 'setTemplate', 'pushHistory']),
async function selectItem(item: IGetTempListData) {
store.commit('setShowMoveable', false) // 清理掉上一次的选择框
// store.commit('setShowMoveable', false) // 清理掉上一次的选择框
controlStore.setShowMoveable(false) // 清理掉上一次的选择框
if (dHistoryParams.value.length > 0) {
const isPass = await useConfirm('提示', '使用模板后，当前页面将会被替换，是否继续', 'warning')
if (!isPass) {
return false
}
}
store.commit('managerEdit', false)
store.commit('setDWidgets', [])
// store.commit('managerEdit', false)
userStore.managerEdit(false)
widgetStore.setDWidgets([])
// store.commit('setDWidgets', [])
setTempId(item.id)
@ -131,15 +148,21 @@ async function selectItem(item: IGetTempListData) {
const { page, widgets } = result
console.log(widgets)
store.commit('setDPage', page)
store.dispatch('setTemplate', widgets)
pageStore.setDPage(page)
// store.commit('setDPage', page)
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',
// })

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

@ -24,9 +24,12 @@
<script lang="ts" setup>
// const NAME = 'text-list-wrap'
import { storeToRefs } from 'pinia';
// import wText from '../../widgets/wText/wText.vue'
import { wTextSetting } from '../../widgets/wText/wTextSetting'
import { useStore } from 'vuex'
// import { useStore } from 'vuex'
import { useControlStore, usePageStore, useWidgetStore } from '@/store';
type TBasicTextData = {
text: string
@ -34,20 +37,29 @@ type TBasicTextData = {
fontWeight: string
}
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const { dPage } = storeToRefs(usePageStore())
const selectBasicText = (item: TBasicTextData) => {
store.commit('setShowMoveable', false) // 清理掉上一次的选择
// store.commit('setShowMoveable', false) // 清理掉上一次的选择
controlStore.setShowMoveable(false) // 清理掉上一次的选择
let setting = JSON.parse(JSON.stringify(wTextSetting))
setting.text = '双击编辑文字' // item.text
setting.width = item.fontSize * setting.text.length
setting.fontSize = item.fontSize
setting.fontWeight = item.fontWeight
const { width: pW, height: pH } = store.getters.dPage
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) => {

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

@ -26,19 +26,24 @@
// 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, useWidgetStore } from '@/store'
// const store = useStore()
const controlStore = useControlStore()
const store = useStore()
const route = useRoute()
const loadDone = ref(false)
const imageCutoutRef = ref<typeof imageCutout | null>(null)
const { dPage } = useSetupMapGetters(['dPage'])
const widgetStore = useWidgetStore()
const { dPage } = storeToRefs(usePageStore())
onMounted(() => {
// this.getDataList()
@ -59,12 +64,16 @@ onMounted(() => {
// }
function addQrcode() {
store.commit('setShowMoveable', false) // 清理掉上一次的选择
// store.commit('setShowMoveable', false) // 清理掉上一次的选择
controlStore.setShowMoveable(false) // 清理掉上一次的选择
let setting = JSON.parse(JSON.stringify(wQrcodeSetting))
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)
}

30
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'
@ -52,6 +52,8 @@ import imgWaterFall from './components/imgWaterFall.vue'
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, useWidgetStore } from '@/store'
type TProps = {
active?: number
@ -70,7 +72,12 @@ type TState = {
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)
const imgListRef = ref<typeof photoList | null>(null)
@ -159,16 +166,21 @@ onMounted(() => {
const selectImg = async (index: number) => {
const item = state.imgList[index]
store.commit('setShowMoveable', false) // 清理掉上一次的选择
// store.commit('setShowMoveable', false) // 清理掉上一次的选择
controlStore.setShowMoveable(false) // 清理掉上一次的选择
let setting = JSON.parse(JSON.stringify(wImageSetting))
const img = await setImageData(item)
setting.width = img.width
setting.height = img.height // parseInt(100 / item.value.ratio, 10)
setting.imgUrl = item.url
const { width: pW, height: pH } = store.getters.dPage
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 = {
@ -177,7 +189,10 @@ type controlImgParam = {
}
const deleteImg = async ({ i, item }: controlImgParam) => {
store.commit('setShowMoveable', false) // 清理掉上一次的选择框
// store.commit('setShowMoveable', false) // 清理掉上一次的选择框
controlStore.setShowMoveable(false) // 清理掉上一次的选择框
const isPass = await useConfirm('警告', '删除后不可找回，已引用资源将会失效，请谨慎操作', 'warning')
if (!isPass) {
return false
@ -216,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)

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

@ -17,8 +17,9 @@
<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 '@/store';
type TProps = {
label?: string
@ -52,7 +53,9 @@ const props = withDefaults(defineProps<TProps>(), {
const emit = defineEmits<TEmits>()
const store = useStore()
// const store = useStore()
const controlStore = useControlStore()
const state = reactive<TState>({
innerColor: '',
// colorLength: 0,
@ -116,11 +119,13 @@ const inputBlur = (color: string) => {
}
const enter = () => {
store.commit('setShowMoveable', false) // 清理掉上一次的选择框
// store.commit('setShowMoveable', false) // 清理掉上一次的选择框
controlStore.setShowMoveable(false) // 清理掉上一次的选择框
}
const hide = () => {
store.commit('setShowMoveable', true) // 恢复上一次的选择框
// store.commit('setShowMoveable', true) // 恢复上一次的选择框
controlStore.setShowMoveable(true) // 恢复上一次的选择框
}

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"

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

@ -56,7 +56,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'
@ -65,7 +65,11 @@ 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 { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { usePageStore, useWidgetStore } from '@/store'
import { TPageState, } from '@/store/design/page'
import { storeToRefs } from 'pinia'
import { proxyToObject } from '@/utils/utils'
import { Delete as iconDelete, Download as iconDownload } from '@element-plus/icons-vue'
import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
// import setImageData from '@/common/methods/DesignFeatures/setImage'
@ -81,7 +85,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: {},
@ -92,7 +98,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(
@ -115,7 +122,6 @@ onMounted(() => {
change()
})
// ...mapActions(['updatePageData']),
function colorChange(e: colorChangeData) {
if (e.mode === '渐变') {
console.log('渐变背景');
@ -138,7 +144,7 @@ function onChangeMode(value: string) {
function change() {
state.mode = state.modes[0]
state.tag = true
state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
state.innerElement = proxyToObject(dActiveElement.value || {})
state.innerElement.backgroundImage && (state.mode = state.modes[1])
}
function changeValue() {
@ -147,25 +153,24 @@ 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 {
store.dispatch('updatePageData', {
key: key,
pageStore.updatePageData({
key: key as keyof TPageState,
value: state.innerElement[key],
})
// updatePageData({
// key: key,
// value: this.innerElement[key],
// })
}
}
}
}
function finish(key: string, value: string | number) {
store.dispatch('updatePageData', {
function finish(key: keyof TPageState, value: string | number) {
pageStore.updatePageData({
key: key,
value: value,
pushHistory: true,
@ -173,7 +178,7 @@ function finish(key: string, value: string | number) {
}
async function uploadImgDone(img: TUploadDoneData) {
await api.material.addMyPhoto(img)
store.dispatch('updatePageData', {
pageStore.updatePageData({
key: 'backgroundTransform',
value: {},
})
@ -181,7 +186,7 @@ async function uploadImgDone(img: TUploadDoneData) {
}
async function deleteBg() {
_localTempBG = null
store.dispatch('updatePageData', {
pageStore.updatePageData({
key: 'backgroundImage',
value: '',
pushHistory: true,
@ -203,10 +208,13 @@ async function shiftOut() {
setting.imgUrl = state.innerElement.backgroundImage
// store.dispatch('addWidget', setting)
setting.uuid = `bg-${(new Date()).getTime()}`
store.getters.dWidgets.unshift(setting)
store.dispatch('selectWidget', {
uuid: store.getters.dWidgets[0].uuid,
widgetStore.dWidgets.unshift(setting)
widgetStore.selectWidget({
uuid: widgetStore.dWidgets[0].uuid,
})
// store.dispatch('selectWidget', {
// uuid: store.getters.dWidgets[0].uuid,
// })
deleteBg()
}
</script>

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 '@/store';
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 '@/store'
import { storeToRefs } from 'pinia'
import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
import { TupdateLayerIndexData } from '@/store/design/widget/actions/layer'
import { TUpdateAlignData } from '@/store/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>

49
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 } from '@/pinia'
import { storeToRefs } from 'pinia'
import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/store'
type TProps = {
params: typeof setting
@ -82,19 +82,27 @@ 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 { dZoom } = storeToRefs(useCanvasStore())
const {
dZoom,
dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
} = useSetupMapGetters(['dZoom', 'dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
// const { dZoom } = storeToRefs(useCanvasStore())
dActiveElement, dWidgets, dMouseXY, dDropOverUuid
} = storeToRefs(widgetStore)
const { dCropUuid } = storeToRefs(controlStore)
// ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
const cropEdit = computed(() => {
@ -135,7 +143,8 @@ watch(
onUpdated(() => {
updateRecord()
store.commit('updateRect')
forceStore.setUpdateRect()
// store.commit('updateRect')
})
onMounted(async () => {
@ -216,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
@ -245,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,
@ -297,9 +306,11 @@ function fixRotate() {
flipTemp = props.params.flip
props.params.flip = null
}
store.commit('setShowMoveable', false)
// store.commit('setShowMoveable', false)
controlStore.setShowMoveable(false)
setTimeout(() => {
store.commit('setShowMoveable', true)
// store.commit('setShowMoveable', true)
controlStore.setShowMoveable(true)
}, 100)
}
@ -313,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)

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

@ -71,7 +71,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'
@ -85,9 +85,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 { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/store'
import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
import { TupdateLayerIndexData } from '@/store/design/widget/actions/layer'
import { TUpdateAlignData } from '@/store/design/widget/actions/align'
type TState = {
picBoxShow: boolean
@ -129,13 +134,17 @@ const state = reactive<TState>({
const picBoxRef = ref<typeof picBox | null>(null)
const imageCutoutRef = ref<typeof imageCutout | null>(null)
const store = useStore()
const {
dActiveElement, dMoving, dWidgets
} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
// computed: {
// ...mapGetters(['dActiveElement', 'dMoving', '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)
const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
let lastUuid: string | undefined = undefined
let tag: boolean
@ -150,6 +159,7 @@ watch(
() => dActiveElement.value,
(newValue, oldValue) => {
change()
if (!newValue) return
// 失焦取消编辑模式
if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
imgCrop(false)
@ -191,34 +201,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,
@ -226,15 +240,15 @@ function finishSliceData(key: string, value: number | number[]) {
}
}
function finish(key: string = "", value: number | number[] | string | null = "") {
store.dispatch('updateWidgetData', {
uuid: dActiveElement.value.uuid,
key: key,
value: value,
function finish(key: string = "", value: string | number | (string | number)[] | null = "") {
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,
@ -243,30 +257,31 @@ function finish(key: string = "", value: number | number[] | string | null = "")
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() {
@ -307,8 +322,8 @@ async function changeContainer(setting: any) {
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)
}
@ -319,12 +334,16 @@ function imgCrop(val: boolean) {
const { left, top } = el.getBoundingClientRect()
toolBarStyle = { left: left + 'px', top: top + 'px' }
state.innerElement.cropEdit = val
store.commit('setShowRotatable', !val)
// store.commit('setShowRotatable', !val)
controlStore.setShowRotatable(!val)
}
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 '@/store';
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, dZoom } = useSetupMapGetters(['dActiveElement', 'dZoom'])
// 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

99
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,7 +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, useForceStore, useWidgetStore } from '@/store'
import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
import { TUpdateAlignData } from '@/store/design/widget/actions/align'
type TState = {
activeNames: string[]
@ -93,11 +97,18 @@ const state = reactive<TState>({
alignIconList,
localization,
})
const store = useStore()
const {
dActiveElement, dMoving, dWidgets
} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
// ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
// const store = useStore()
const controlStore = useControlStore()
const widgetStore = useWidgetStore()
const forceStore = useForceStore()
// const {
// dActiveElement, dWidgets
// } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
const { dMoving } = storeToRefs(useControlStore())
const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
let lastUuid: string | null = null
@ -105,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,
// })
@ -156,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,
@ -189,36 +204,42 @@ 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) {
store.commit('setShowMoveable', false)
// store.commit('setShowMoveable', false)
controlStore.setShowMoveable(false)
await api.material.addMyPhoto(img)
// this.innerElement.width = img.width
// this.innerElement.height = img.height * (this.innerElement.width / img.width)
state.innerElement.url = img.url
store.commit('setShowMoveable', true)
// store.commit('setShowMoveable', true)
controlStore.setShowMoveable(true)
}
</script>

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 '@/store';
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 '@/store/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) {

70
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,7 +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, useWidgetStore } from '@/store'
import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
import { TUpdateAlignData } from '@/store/design/widget/actions/align'
type TState = {
activeNames: string[]
@ -64,10 +68,13 @@ const state = reactive<TState>({
layerIconList,
alignIconList,
})
const store = useStore()
const {
dActiveElement, dMoving
} = useSetupMapGetters(['dActiveElement', 'dMoving'])
// const store = useStore()
const widgetStore = useWidgetStore()
// const {
// dActiveElement
// } = useSetupMapGetters(['dActiveElement'])
const { dMoving } = storeToRefs(useControlStore())
const { dActiveElement } = storeToRefs(widgetStore)
// ...mapGetters(['dActiveElement', 'dMoving']),
@ -111,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],
// })
}
}
@ -132,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,
@ -147,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 '@/store'
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 '@/store'
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)
}

80
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'
@ -66,6 +66,10 @@ import effectWrap from '../../settings/EffectSelect/TextWrap.vue'
import { useFontStore } from '@/common/methods/fonts'
import usePageFontsFilter from './pageFontsFilter'
import { wTextSetting ,TwTextData } from './wTextSetting';
import { storeToRefs } from 'pinia';
import { useControlStore, useForceStore, useWidgetStore } from '@/store';
import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget';
import { TUpdateAlignData } from '@/store/design/widget/actions/align';
type TState = {
activeNames: string[],
@ -82,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: [],
@ -98,8 +104,10 @@ const state = reactive<TState>({
styleIconList2,
alignIconList,
})
const dActiveElement = computed(() => store.getters.dActiveElement)
const dMoving = computed(() => store.getters.dMoving)
const dActiveElement = computed(() => widgetStore.dActiveElement)
// const dMoving = computed(() => store.getters.dMoving)
const { dMoving } = storeToRefs(useControlStore())
// const isDraw = computed(() => route.name === 'Draw')
watch(() => dActiveElement.value, () => {
@ -144,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 || '')
}
@ -178,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) {
@ -202,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() {
@ -246,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

7
src/main.ts
View File

@ -8,12 +8,14 @@
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'
import elementConfig from './utils/widgets/elementConfig'
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
elementConfig.components.forEach((component) => {
@ -25,7 +27,8 @@ elementConfig.plugins.forEach((plugin) => {
})
app
.use(store)
// .use(store)
.use(pinia)
.use(router)
.use(utils)
.mount('#app')

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

@ -5,14 +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 { useGroupStore, useHistoryStore, useWidgetStore } from '@/store'
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()
@ -42,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) => x.parent === pid) || []
childs.forEach((element: any) => {
element[key] && (itHas = true)
})
@ -53,37 +57,44 @@ 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()
})
}
/**
* 撤销
*/
function undo(shiftKey: any) {
const historyStore = useHistoryStore()
console.log(historyStore.dHistoryParams);
if (shiftKey) {
if (!(store.getters.dHistoryParams.index === store.getters.dHistoryParams.length - 1)) {
// this.handleHistory('redo')
store.dispatch('handleHistory', 'redo')
if (!(historyStore.dHistoryParams.index === historyStore.dHistoryParams.length - 1)) {
historyStore.handleHistory("redo")
// store.dispatch('handleHistory', 'redo')
}
} else if (store.getters.dHistoryParams.index !== -1) {
} else if (historyStore.dHistoryParams.index !== -1) {
// this.handleHistory('undo')
store.dispatch('handleHistory', 'undo')
historyStore.handleHistory('undo')
// store.dispatch('handleHistory', 'undo')
}
}

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

@ -11,23 +11,28 @@
// 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'
import { getImage } from '@/common/methods/getImgDetail'
// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
// import wText from '@/components/modules/widgets/wText/wText.vue'
import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
import eventBus from '@/utils/plugins/eventBus'
import { useControlStore, usePageStore, useWidgetStore } from '@/store'
// 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++) {
@ -37,22 +42,27 @@ 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 })
// 刷新用户列表
eventBus.emit('refreshUserImages')
// 添加图片到画布中
store.commit('setShowMoveable', false) // 清理掉上一次的选择
// store.commit('setShowMoveable', false) // 清理掉上一次的选择
controlStore.setShowMoveable(false) // 清理掉上一次的选择
const setting = JSON.parse(JSON.stringify(wImageSetting))
setting.width = width
setting.height = height
setting.imgUrl = url
const { width: pW, height: pH } = store.getters.dPage
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({
@ -61,14 +71,19 @@ export default () => {
])
// 最后尝试复制，将图片替换为图片组件
setTimeout(() => {
store.dispatch('copyWidget')
widgetStore.copyWidget()
// store.dispatch('copyWidget')
}, 100)
break
} else if (item.types.toString().indexOf('text') !== -1) {
store.commit('setShowMoveable', false) // 清理掉上一次的选择
// store.commit('setShowMoveable', false) // 清理掉上一次的选择
controlStore.setShowMoveable(false) // 清理掉上一次的选择
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()
}

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

@ -5,10 +5,15 @@
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-11-30 10:09:55
*/
import store from '@/store'
import { useControlStore, useWidgetStore } from '@/store'
import { TdWidgetData } from '@/store/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:
udlr('top', -1 * f, e)
@ -25,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 && store.getters.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
}
@ -43,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
@ -54,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()

54
src/mixins/move.ts
View File

@ -5,21 +5,29 @@
* @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-07-31 09:31:52
*/
import store from '@/store'
import { useControlStore, useWidgetStore } from '@/store'
// 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)
@ -28,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')
},
},
}
@ -49,23 +64,36 @@ const move = {
const moveInit = {
methods: {
initmovement(e: MouseEvent) {
if (!store.getters.dAltDown) {
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)

16
src/mixins/shortcuts.ts
View File

@ -5,13 +5,14 @@
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-09-19 17:29:06
*/
import store from '@/store'
// import store from '@/store'
// const _this: any = {}
// _this.dHistoryParams = store.getters.dHistoryParams
import keyCodeOptions from './methods/keyCodeOptions'
import dealWithCtrl from './methods/dealWithCtrl'
import { useStore, Store } from 'vuex'
import { TControlStore } from '@/store/design/control'
const ignoreNode = ['INPUT', 'TEXTAREA']
@ -34,7 +35,7 @@ let hadDown = false
const shortcuts = {
methods: {
handleKeydowm(store: Store<any>, checkCtrl: number | undefined, instance: any, dealCtrl: (e: any, instance: any) => void) {
handleKeydowm(store: TControlStore, checkCtrl: number | undefined, instance: any, dealCtrl: (e: any, instance: any) => void) {
return (e: any) => {
const nodeName = e.target.nodeName
if (ignoreNode.indexOf(nodeName) !== -1 || (nodeName === 'DIV' && e.target.contentEditable === 'true')) {
@ -55,14 +56,16 @@ const shortcuts = {
// hadDown = false
// }
if (shift || ctrl) {
store.dispatch('updateAltDown', true)
store.updateAltDown(true)
// store.dispatch('updateAltDown', true)
clearInterval(checkCtrl)
checkCtrl = setInterval(() => {
// TODO: 防止组合键导致页面失焦无法操作
if (!document.hasFocus()) {
clearInterval(checkCtrl)
hadDown = false
store.dispatch('updateAltDown', false)
store.updateAltDown(false)
// store.dispatch('updateAltDown', false)
}
}, 500)
}
@ -114,13 +117,14 @@ const shortcuts = {
keyCodeOptions(e, { f })
}
},
handleKeyup(store: Store<any>, checkCtrl: number | undefined) {
handleKeyup(store: TControlStore, checkCtrl: number | undefined) {
return (e: any) => {
console.log(e)
clearInterval(checkCtrl)
hadDown = false
if (e.key === 'Alt' || e.key === 'Shift' || e.key === 'Control' || e.key === 'Meta') {
store.dispatch('updateAltDown', false)
store.updateAltDown(false)
// store.dispatch('updateAltDown', false)
}
}
},

52
src/store/base/index.ts Normal file
View File

@ -0,0 +1,52 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-17 15:00:00
* @Description: Base全局状态管理
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-18 21:00:00
*/
import { Store, defineStore } from 'pinia'
// import actions from './actions'
// import _config from '@/config'
type TStoreBaseState = {
loading: boolean | null
scroll: boolean
/** fonts */
fonts: string[]
/** 抠图服务 */
app: string | null
}
type TUserAction = {
hideLoading: () => void
setFonts: (list: string[]) => void
}
/** Base全局状态管理 */
const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base', {
state: () => ({
loading: null,
scroll: true,
fonts: [], // 缓存字体列表
app: null, // 抠图服务
}),
actions: {
/** 隐藏loading */
hideLoading() {
setTimeout(() => {
this.loading = false
}, 600)
},
setFonts(list: string[]) {
this.fonts = list
},
}
})
export type TBaseStore = Store<'base', TStoreBaseState, {}, TUserAction>
export default useBaseStore

61
src/store/base/user.ts Normal file
View File

@ -0,0 +1,61 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-17 15:00:00
* @Description: User全局状态管理
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-18 21:00:00
*/
import { Store, defineStore } from "pinia"
type TUserStoreState = {
/** 登录状态 */
online: boolean
/** 储存用户信息 */
user: {
name: string | null
}
/**是否为管理员模式 */
manager: string
/** 管理员是否正在编辑模板 */
tempEditing: boolean
}
type TUserAction = {
/** 修改登录状态 */
changeOnline: (state: boolean) => void
/** 修改登录用户 */
changeUser: (userName: string) => void
managerEdit: (status: boolean) => void
}
/** User全局状态管理 */
const useUserStore = defineStore<'userStore', TUserStoreState, {}, TUserAction>('userStore', {
state: () => ({
online: true, // 登录状态，
user: {
name: localStorage.getItem('username'),
}, // 储存用户信息
manager: '', // 是否为管理员模式
tempEditing: false, // 管理员是否正在编辑模板
}),
actions: {
changeOnline(status: boolean) {
this.online = status
},
changeUser(name: string) {
this.user.name = name
// state.user = Object.assign({}, state.user)
// state.user = { ...state.user }
localStorage.setItem('username', name)
},
managerEdit(status: boolean) {
this.tempEditing = status
},
}
})
export type TUserStore = Store<'userStore', TUserStoreState, {}, TUserAction>
export default useUserStore

96
src/store/design/canvas/index.ts Normal file
View File

@ -0,0 +1,96 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description: 画布全局配置
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-18 21:00:00
*/
import { Store, defineStore } from 'pinia'
type TScreeData = {
/** 记录编辑界面的宽度 */
width: number
/** 记录编辑界面的高度 */
height: number
}
type TGuidelinesData = {
verticalGuidelines: number[]
horizontalGuidelines: number[]
}
type TCanvasState = {
/** 画布缩放百分比 */
dZoom: number
/** 画布垂直居中修正值 */
dPaddingTop: number
/** 编辑界面 */
dScreen: TScreeData
/** 标尺辅助线 */
guidelines: TGuidelinesData
}
type TStoreAction = {
/** 更新画布缩放百分比 */
updateZoom: (zoom: number) => void
/** 更新画布垂直居中修正值 */
updatePaddingTop: (num: number) => void
/** 更新编辑界面的宽高 */
updateScreen: (data: TScreeData) => void
/** 修改标尺线 */
updateGuidelines: (lines: TGuidelinesData) => void
/** 强制重绘画布 */
reChangeCanvas: () => void
}
/** 画布全局设置 */
const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("canvasStore", {
state: () => ({
dZoom: 0, // 画布缩放百分比
dPaddingTop: 0, // 画布垂直居中修正值
dScreen: {
width: 0, // 记录编辑界面的宽度
height: 0, // 记录编辑界面的高度
},
// gridSize: {
// width: 0, // 网格小格子的宽度
// height: 0, // 网格小格子的高度
// },
guidelines: {
// moveable 标尺辅助线
verticalGuidelines: [],
horizontalGuidelines: [],
},
}),
actions: {
/** 更新画布缩放百分比 */
updateZoom(zoom: number) {
this.dZoom = zoom
},
/** 更新画布垂直居中修正值 */
updatePaddingTop(num: number) {
this.dPaddingTop = num
},
/** 更新编辑界面的宽高 */
updateScreen({ width, height }: TScreeData) {
console.log(this.dScreen)
this.dScreen.width = width
this.dScreen.height = height
},
/** 修改标尺线 */
updateGuidelines(lines: TGuidelinesData) {
this.guidelines = { ...this.guidelines, ...lines }
},
/** 强制重绘画布 */
reChangeCanvas() {
// const tag = this.dPage.tag
// this.dPage.tag = tag === 0 ? 0.01 : 0
},
}
})
export type TCanvasStore = Store<"canvasStore", TCanvasState, {}, TStoreAction>
export default CanvasStore

116
src/store/design/control/index.ts Normal file
View File

@ -0,0 +1,116 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-18 21:00:00
*/
import { useHistoryStore } from "@/store";
import { Store, defineStore } from "pinia";
type TControlState = {
/** 是否正在移动组件 */
dMoving: boolean
/** 是否正在抓取组件 */
dDraging: boolean
/** 是否正在调整组件宽高 */
dResizeing: boolean
/** 是否显示参考线 */
dShowRefLine: boolean
/** 全局控制选择框的显示 */
showMoveable: boolean
/** 是否显示moveable的旋转按钮 */
showRotatable: boolean
/** 记录是否按下alt键 / 或ctrl */
dAltDown: boolean
/** 正在编辑or裁剪的组件id */
dCropUuid: string
}
type TControlAction = {
setdMoving: (isMoving: boolean) => void
setDraging: (isDraging: boolean) => void
setdResizeing: (isResizing: boolean) => void
showRefLine: (isRefLine: boolean) => void
setShowMoveable: (isShowMoveable: boolean) => void
setShowRotatable: (isShowRotatable: boolean) => void
updateAltDown: (isPressAltDown: boolean) => void
/** 组件调整结束 */
stopDResize: () => void
/** 组件移动结束 */
stopDMove: () => void
/** 设置正在裁剪or编辑的组件 */
setCropUuid: (uuid: string) => void
}
/** 全局控制配置 */
const ControlStore = defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
state: () => ({
dMoving: false, // 是否正在移动组件
dDraging: false, // 是否正在抓取组件
dResizeing: false, // 是否正在调整组件宽高
dShowRefLine: true, // 是否显示参考线
showMoveable: false, // 全局控制选择框的显示
showRotatable: true, // 是否显示moveable的旋转按钮
dAltDown: false, // 记录是否按下alt键 / 或ctrl
dCropUuid: '-1', // 正在编辑or裁剪的组件id
}),
getters: {},
actions: {
setdMoving(bool: boolean) {
this.dMoving = bool
},
setDraging(drag: boolean) {
this.dDraging = drag
},
setdResizeing(bool: boolean) {
this.dResizeing = bool
},
showRefLine(show: boolean) {
this.dShowRefLine = show
},
setShowMoveable(show: boolean) {
this.showMoveable = show
// if (!show) {
// // TODO: 失焦时设置面板也失去关联，但会导致某些失焦状态出错(如裁剪)
// state.dActiveElement = state.dPage
// }
},
setShowRotatable(e: boolean) {
this.showRotatable = e
},
/** TODO 组合操作 */
updateAltDown(e: boolean) {
this.dAltDown = e
console.log('控制组合按键, 成组功能为: realCombined')
},
/** 组件调整结束 */
stopDResize() {
if (this.dResizeing) {
const historyStore = useHistoryStore()
historyStore.pushHistory('stopDResize')
// store.dispatch('pushHistory', 'stopDResize')
}
this.dResizeing = false
},
/** 组件移动结束 */
stopDMove() {
if (this.dMoving) {
const historyStore = useHistoryStore()
historyStore.pushHistory("stopDMove")
// store.dispatch('pushHistory', 'stopDMove')
}
this.dMoving = false
},
setCropUuid(uuid: string) {
// 设置正在裁剪or编辑的组件
this.dCropUuid = uuid
},
}
})
export type TControlStore = Store<"controlStore", TControlState, {}, TControlAction>
export default ControlStore

45
src/store/design/force/index.ts Normal file
View File

@ -0,0 +1,45 @@
import { Store, defineStore } from "pinia";
type TForceState = {
/** 画布强制刷新适应度 */
zoomScreenChange: number | null
/** 强制刷新操作框 */
updateRect: number | null
/** 强制设置选择元素 */
updateSelect: number | null
}
type TForceAction = {
setZoomScreenChange: () => void
setUpdateRect: () => void
setUpdateSelect: () => void
}
const ForceStore = defineStore<"forceStore", TForceState, {}, TForceAction>("forceStore", {
state: () => ({
zoomScreenChange: null, // 画布强制刷新适应度
updateRect: null, // 强制刷新操作框
updateSelect: null, // 强制设置选择元素
}),
actions: {
setZoomScreenChange() {
// 画布尺寸适应度强制刷新
this.zoomScreenChange = Math.random()
},
setUpdateRect() {
// 强制刷新操作框
this.updateRect = Math.random()
},
setUpdateSelect() {
// 强制触发元素选择
this.updateSelect = Math.random()
},
}
})
export type TForceStore = Store<"forceStore", TForceState, {}, TForceAction>
export default ForceStore

130
src/store/design/group/action/index.ts Normal file
View File

@ -0,0 +1,130 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-28 14:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { customAlphabet } from 'nanoid/non-secure'
import { TGroupStore } from '..'
import { useHistoryStore, usePageStore, useWidgetStore } from '@/store'
import { TdWidgetData } from '../../widget'
const nanoid = customAlphabet('1234567890abcdef', 12)
export function realCombined(store: TGroupStore) {
const widgetStore = useWidgetStore()
const pageStore = usePageStore()
const historyStore = useHistoryStore()
const selectWidgets = widgetStore.dSelectWidgets
if (selectWidgets.length > 1) {
const widgets = widgetStore.dWidgets
const group: TdWidgetData = JSON.parse(store.dGroupJson)
group.uuid = nanoid()
widgets.push(group)
let left = Number(pageStore.dPage.width)
let top = Number(pageStore.dPage.height)
let right = 0
let bottom = 0
const sortWidgets = [] // 顺序取出元素
const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
for (const w of widgets) {
selectkeys.includes(w.uuid) && sortWidgets.push(w)
}
for (let i = 0; i < sortWidgets.length; ++i) {
const uuid = sortWidgets[i].uuid
const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
const widget = { ...widgets[index] } // clone
if (widget.isContainer) {
widgets.splice(index, 1) // 删除旧组合
for (let i = 0; i < widgets.length; i++) {
const item = widgets[i]
item.parent === widget.uuid && (item.parent = group.uuid)
// if (item.parent === widget.uuid) {
// item.parent = group.uuid
// // 重新排列
// // const index = widgets.findIndex((x) => x.uuid === item.uuid)
// // widgets.splice(index, 1)
// // widgets.push(item)
// }
}
} else {
widget.parent = group.uuid
// 重新排列
widgets.splice(index, 1)
widgets.push(widget)
}
// sortWidgets.push({
// index: index,
// widget: widget,
// })
left = Math.min(left, widget.left)
top = Math.min(top, widget.top)
right = Math.max(right, Number(widget.width || widget.record.width) + Number(widget.left))
bottom = Math.max(bottom, Number(widget.height || widget.record.height) + Number(widget.top))
}
// sortWidgets.sort((a, b) => a.index > b.index)
// for (let i = 0; i < sortWidgets.length; ++i) {
// const index = widgets.findIndex((item) => item.uuid === sortWidgets[i].widget.uuid)
// widgets.splice(index, 1)
// widgets.push(sortWidgets[i].widget)
// }
group.left = Number(left)
group.top = Number(top)
group.width = Number(right - left)
group.height = Number(bottom - top)
widgetStore.dActiveElement = group
widgetStore.dSelectWidgets = []
historyStore.pushHistory('realCombined')
// store.dispatch('pushHistory', 'realCombined')
// store.dispatch('reChangeCanvas')
}
}
export function getCombined(store: TGroupStore): Promise<TdWidgetData> {
const widgetStore = useWidgetStore()
const pageStore = usePageStore()
const selectWidgets = widgetStore.dSelectWidgets
return new Promise((resolve) => {
if (selectWidgets.length > 1) {
const widgets = widgetStore.dWidgets
const group = JSON.parse(store.dGroupJson)
group.uuid = nanoid()
// widgets.push(group)
let left = pageStore.dPage.width
let top = pageStore.dPage.height
let right = 0
let bottom = 0
const sortWidgets = [] // 顺序取出元素
const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
for (const w of widgets) {
selectkeys.includes(w.uuid) && sortWidgets.push(w)
}
for (let i = 0; i < sortWidgets.length; ++i) {
const uuid = sortWidgets[i].uuid
const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
const widget = { ...widgets[index] } // clone
left = Math.min(left, widget.left)
top = Math.min(top, widget.top)
right = Math.max(right, Number(widget.width) + Number(widget.left))
bottom = Math.max(bottom, Number(widget.height) + Number(widget.top))
}
group.left = left
group.top = top
group.width = right - left
group.height = bottom - top
resolve(group)
}
})
}
export function initGroupJson(store: TGroupStore, json: string) {
store.dGroupJson = json
}

38
src/store/design/group/index.ts Normal file
View File

@ -0,0 +1,38 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description: Store方法export
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { Store, defineStore } from "pinia";
import { getCombined, initGroupJson, realCombined } from "./action";
import { TdWidgetData } from "../widget";
type TGroupState = {
/** 组合的json数据 */
dGroupJson: string
}
type TGroupAction = {
realCombined(): void
getCombined(): Promise<TdWidgetData>
initGroupJson(data: string): void
}
const GroupStore = defineStore<"groupStore", TGroupState, {}, TGroupAction>("groupStore", {
state: () => ({
dGroupJson: "" // 组合的json数据
}),
actions: {
realCombined() { realCombined(this) },
getCombined() { return getCombined(this) },
initGroupJson(data) { initGroupJson(this, data) },
}
})
export type TGroupStore = Store<"groupStore", TGroupState, {}, TGroupAction>
export default GroupStore

40
src/store/design/history/actions/handleHistory.ts Normal file
View File

@ -0,0 +1,40 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-27 21:00:00
*/
import { useControlStore, usePageStore } from "@/store"
import { THistoryStore } from ".."
export default function handleHistory(store: THistoryStore, action: "undo" | "redo") {
const pageStore = usePageStore()
const controlStore = useControlStore()
controlStore.setShowMoveable(false) // 清理掉上一次的选择框
// store.commit('setShowMoveable', false) // 清理掉上一次的选择框
const history = store.dHistory
const pageHistory = store.dPageHistory
const historyParams = store.dHistoryParams
if (action === 'undo') {
historyParams.index -= 1 // 下标向前移1 撤销
console.log(historyParams.index)
if (historyParams.index > -1) {
store.state.dWidgets = JSON.parse(history[historyParams.index])
pageStore.setDPage(JSON.parse(pageHistory[historyParams.index]))
}
} else if (action === 'redo') {
historyParams.index += 1 // 下标向后移1 重做
// 如果下标小于历史记录列表长度，直接取出历史记录
// if (historyParams.index < historyParams.length) {
store.state.dWidgets = JSON.parse(history[historyParams.index])
pageStore.setDPage(JSON.parse(pageHistory[historyParams.index]))
// } else {
// // 否则设置下标为列表最后一项
// historyParams.index = historyParams.length - 1
// store.state.dWidgets = JSON.parse(history[historyParams.index])
// store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
// }
}
}

51
src/store/design/history/actions/pushHistory.ts Normal file
View File

@ -0,0 +1,51 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-27 21:00:00
*/
import { usePageStore, useWidgetStore } from "@/store"
import { THistoryStore } from ".."
import { proxyToObject } from "@/utils/utils"
/** push操作历史记录 */
export function pushHistory(store: THistoryStore, msg: string = "") {
const pageStore = usePageStore()
const selectStore = useWidgetStore()
console.log('history压栈', '来源: ' + msg)
// 如果有上一次记录，并且与新纪录相同，那么不继续操作
if (store.dHistory[history.length - 1] && store.dHistory[history.length - 1] === JSON.stringify(selectStore.dWidgets)) {
return
}
if (store.dHistoryParams.index < history.length - 1) {
const index = store.dHistoryParams.index + 1
const len = history.length - index
store.dHistory.splice(index, len)
store.dPageHistory.splice(index, len)
store.dHistoryParams.length = history.length
store.dHistoryParams.index = history.length - 1
}
store.dHistory.push(JSON.stringify(selectStore.dWidgets))
store.dPageHistory.push(JSON.stringify(proxyToObject(pageStore.dPage)))
store.dHistoryParams.index = history.length - 1
store.dHistoryParams.length = history.length
}
/** 添加颜色选择历史记录 */
export function pushColorToHistory(store: THistoryStore, color: string) {
const history = store.dColorHistory
// 如果已经存在就提到前面来，避免重复
const index = history.indexOf(color)
if (index !== -1) {
history.splice(index, 1)
}
// 最多保存3种颜色
if (history.length === 4) {
history.splice(history.length - 1, 1)
}
// 把最新的颜色放在头部
const head = [color]
store.dColorHistory = head.concat(history)
}

81
src/store/design/history/index.ts Normal file
View File

@ -0,0 +1,81 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-27 21:00:00
*/
import { Store, defineStore } from "pinia"
import {pushHistory, pushColorToHistory} from "./actions/pushHistory"
import handleHistory from "./actions/handleHistory"
import { usePageStore, useWidgetStore } from "@/store"
export type THistoryParamData = {
index: number
length: number
maxLength: number
}
type THistoryState = {
/** 记录历史操作（保存整个画布的json数据） */
dHistory: string[]
/** 记录历史操作对应的激活的组件的uuid */
dActiveUuidHistory: string[]
/** 记录历史操作对应的page */
dPageHistory: string[]
dHistoryParams: THistoryParamData,
/** 记录历史选择的颜色 */
dColorHistory: string[]
}
type THistoryAction = {
/**
* 保存操作历史，
* 修改数据、移动完成后都会自动保存
* 同时会保存当前激活的组件的uuid，方便撤回时自动激活
*/
pushHistory: (msg?: string) => void
/**
* 操作历史记录
* action为undo表示撤销
* action为redo表示重做
*/
handleHistory: (action: "undo" | "redo") => void
pushColorToHistory: (color: string) => void
}
/** 历史记录Store */
const HistoryStore = defineStore<"historyStore", THistoryState, {}, THistoryAction>("historyStore", {
state: () => ({
dHistory: [],
dHistoryParams: {
index: -1,
length: 0,
maxLength: 20,
},
dActiveUuidHistory: [],
dColorHistory: [],
dPageHistory: []
}),
actions: {
pushHistory(msg) {
pushHistory(this, msg)
},
handleHistory(action) {
const selectStore = useWidgetStore()
const pageStore = usePageStore()
handleHistory(this, action)
// 激活组件默认为page
selectStore.dActiveElement = pageStore.dPage
},
pushColorToHistory(color) {
pushColorToHistory(this, color)
}
}
})
export type THistoryStore = Store<"historyStore", THistoryState, {}, THistoryAction>
export default HistoryStore

106
src/store/design/page/index.ts Normal file
View File

@ -0,0 +1,106 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description: Page全局配置
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-18 21:00:00
*/
import { Store, defineStore } from 'pinia'
export type TPageState = {
name: string
type: string
uuid: string
left: number
top: number
/** 画布宽度 */
width: number
/** 画布高度 */
height: number
/** 画布背景颜色 */
backgroundColor: string
/** 画布背景图片 */
backgroundImage: string
backgroundTransform: {
x?: number
y?: number
}
/** 透明度 */
opacity: number
/** 强制刷新用 */
tag: number
setting:{
label: string
parentKey: string
value: boolean
}[]
record: Record<string, any>
}
type TPageGetter = {
dPage(state: TPageState): TPageState
}
type TPageActions = {
/** 更新Page数据 */
updatePageData<T extends keyof TPageState>(data: {
key: T
value: TPageState[T]
pushHistory?: boolean
}): void
/** 设置dPage */
setDPage(data: TPageState): void
}
/** 页面全局配置 */
const PageStore = defineStore<"pageStore", TPageState, TPageGetter, TPageActions>("pageStore", {
state: () => ({
name: '背景页面',
type: 'page',
uuid: '-1',
left: 0,
top: 0,
width: 1920, // 画布宽度
height: 1080, // 画布高度
backgroundColor: '#ffffff', // 画布背景颜色
backgroundImage: '', // 画布背景图片
backgroundTransform: {},
opacity: 1, // 透明度
tag: 0, // 强制刷新用
setting: [
{
label: '背景颜色',
parentKey: 'backgroundColor',
value: false,
},
],
record: {},
}),
getters: {
dPage: (state) => state
},
actions: {
/** 更新Page数据 */
updatePageData({ key, value, pushHistory }) {
const data = this as TPageState
if (data[key] !== value || pushHistory) {
data[key] = value
// 画布修改先不压入历史栈，因为替换模板后会重复压栈
// store.dispatch('pushHistory', 'updatePageData')
}
},
/** 设置dPage */
setDPage(data: TPageState) {
const cur = this as Record<string, any>
const keys = Object.keys(data) as (keyof TPageState)[];
keys.forEach(val => {
cur[val] = data[val]
})
}
}
})
export type TPageStore = Store<"pageStore", TPageState, TPageGetter, TPageActions>
export default PageStore

90
src/store/design/widget/actions/align.ts Normal file
View File

@ -0,0 +1,90 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-28 14:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { useCanvasStore, useHistoryStore, usePageStore } from "@/store"
import { TWidgetStore, TdWidgetData } from ".."
type TAlign = 'left' | 'ch' | 'right' | 'top' | 'cv' | 'bottom'
export type TUpdateAlignData = {
align: TAlign
uuid: string
group?: TdWidgetData
}
export function updateAlign(store: TWidgetStore, { align, uuid, group }: TUpdateAlignData) {
const pageStore = usePageStore()
const historyStore = useHistoryStore()
const canvasStore = useCanvasStore()
const widgets = store.dWidgets
const target = uuid ? widgets.find((item: any) => item.uuid === uuid) : store.dActiveElement
let parent = group || pageStore.dPage
if (!target) return
if (target.parent !== '-1') {
const tmp = widgets.find((item: any) => item.uuid === target.parent)
tmp && (parent = tmp)
}
let left = target.left
let top = target.top
let pw = parent.record.width || parent.width
let ph = parent.record.height || parent.height
if (parent.uuid === '-1') {
pw = parent.width
ph = parent.height
}
const targetW = target.width
const targetH = target.height
switch (align) {
case 'left':
left = parent.left
break
case 'ch': // 水平居中
left = parent.left + pw / 2 - targetW / 2
break
case 'right':
left = parent.left + pw - targetW
break
case 'top':
top = parent.top
break
case 'cv': // 垂直居中
top = parent.top + ph / 2 - targetH / 2
break
case 'bottom':
top = parent.top + ph - targetH
break
}
if (target.left !== left || target.top !== top) {
if (target.isContainer) {
const dLeft = target.left - left
const dTop = target.top - top
const len = widgets.length
for (let i = 0; i < len; ++i) {
const widget = widgets[i]
if (widget.parent === target.uuid) {
widget.left -= dLeft
widget.top -= dTop
}
}
}
target.left = left
target.top = top
historyStore.pushHistory("updateAlign")
// store.dispatch('pushHistory', 'updateAlign')
canvasStore.reChangeCanvas()
// store.dispatch('reChangeCanvas')
}
}

81
src/store/design/widget/actions/clone.ts Normal file
View File

@ -0,0 +1,81 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-28 14:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { useCanvasStore, useHistoryStore } from "@/store"
import { TWidgetStore, TdWidgetData } from ".."
import { customAlphabet } from 'nanoid/non-secure'
const nanoid = customAlphabet('1234567890abcdef', 12)
/** 拷贝组件 */
export function copyWidget(store: TWidgetStore) {
const activeElement = JSON.parse(JSON.stringify(store.dActiveElement))
if (activeElement.type === 'page') {
return
}
navigator.clipboard.writeText('') // 清空系统剪贴板内容
const container = []
const selectWidgets = store.dSelectWidgets
if (selectWidgets.length === 0) {
const uuid = activeElement.uuid
container.push(activeElement)
if (activeElement.isContainer) {
const widgets = store.dWidgets
for (let i = 0; i < widgets.length; ++i) {
if (widgets[i].parent === uuid) {
container.push(widgets[i])
}
}
}
} else {
for (let i = 0; i < selectWidgets.length; ++i) {
const uuid = selectWidgets[i].uuid
container.push(selectWidgets[i])
if (selectWidgets[i].isContainer) {
const widgets = store.dWidgets
for (let i = 0; i < widgets.length; ++i) {
if (widgets[i].parent === uuid) {
container.push(widgets[i])
}
}
}
}
}
store.dCopyElement = JSON.parse(JSON.stringify(container))
}
/** 粘贴组件 */
export function pasteWidget(store: TWidgetStore) {
const historyStore = useHistoryStore()
const canvasStore = useCanvasStore()
const copyElement: TdWidgetData[] = JSON.parse(JSON.stringify(store.dCopyElement))
const container = copyElement.find((item) => item.isContainer)
for (let i = 0; i < copyElement.length; ++i) {
copyElement[i].uuid = nanoid()
if (container && copyElement[i].uuid !== container.uuid) {
copyElement[i].parent = container.uuid
} else {
copyElement[i].parent = '-1'
}
copyElement[i].top += 30
copyElement[i].left += 30
}
store.dWidgets = store.dWidgets.concat(copyElement)
store.dActiveElement = copyElement[0]
store.dSelectWidgets = copyElement
if (container) {
store.dActiveElement = container
store.dSelectWidgets = []
}
historyStore.pushHistory("pasteWidget")
// store.dispatch('pushHistory', 'pasteWidget')
store.copyWidget()
// store.dispatch('copyWidget')
canvasStore.reChangeCanvas()
// store.dispatch('reChangeCanvas')
}

36
src/store/design/widget/actions/group.ts Normal file
View File

@ -0,0 +1,36 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-28 21:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { useCanvasStore, useHistoryStore } from "@/store"
import { TWidgetStore, TdWidgetData } from ".."
import { customAlphabet } from 'nanoid/non-secure'
const nanoid = customAlphabet('1234567890abcdef', 12)
export function addGroup(store: TWidgetStore, group: TdWidgetData[]) {
const historyStore = useHistoryStore()
const canvasStore = useCanvasStore()
let parent: TdWidgetData | null = null
group.forEach((item) => {
item.uuid = nanoid() // 重设id
item.type === 'w-group' && (parent = item) // 找出父组件
})
group.forEach((item) => {
!item.isContainer && parent && (item.parent = parent.uuid) // 重设父id
item.text && (item.text = decodeURIComponent(item.text))
store.dWidgets.push(item)
})
// 选中组件
const len = store.dWidgets.length
store.dActiveElement = store.dWidgets[len - 1]
historyStore.pushHistory("addGroup")
// store.dispatch('pushHistory', 'addGroup')
canvasStore.reChangeCanvas()
// store.dispatch('reChangeCanvas')
}

125
src/store/design/widget/actions/index.ts Normal file
View File

@ -0,0 +1,125 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description: Store方法export
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { useCanvasStore, useControlStore, usePageStore } from "@/store"
import { TWidgetStore } from ".."
export type TInidDMovePayload = {
startX: number
startY: number
originX: number
originY: number
}
/** 设置 mousemove 操作的初始值 */
export function initDMove(store: TWidgetStore, payload: TInidDMovePayload) {
store.dMouseXY.x = payload.startX
store.dMouseXY.y = payload.startY
store.dActiveWidgetXY.x = payload.originX
store.dActiveWidgetXY.y = payload.originY
}
export type TMovePayload = {
donotMove?: boolean
x: number
y: number
}
/** 移动组件 */
export function dMove(store: TWidgetStore, payload: TMovePayload) {
const page = usePageStore().dPage
const canvasStore = useCanvasStore()
const controlStore = useControlStore()
const { donotMove } = payload // 由moveable代理移动
controlStore.setdMoving(true)
const target = store.dActiveElement
const mouseXY = store.dMouseXY
const widgetXY = store.dActiveWidgetXY
let parent = page
if (!target) return
if (target.parent !== '-1') {
const widget = store.dWidgets.find((item) => item.uuid === target.parent)
if (widget) {
parent = widget
}
}
const dx = payload.x - mouseXY.x
const dy = payload.y - mouseXY.y
let left = widgetXY.x + Math.floor((dx * 100) / canvasStore.dZoom)
let top = widgetXY.y + Math.floor((dy * 100) / canvasStore.dZoom)
left = Math.max(Math.min(left, page.width - target.record.width), 0)
top = Math.max(Math.min(top, page.height - target.record.height), 0)
if (target.isContainer) {
const dLeft = target.left - left
const dTop = target.top - top
const len = store.dWidgets.length
for (let i = 0; i < len; ++i) {
const widget = store.dWidgets[i]
if (widget.parent === target.uuid) {
widget.left -= dLeft
widget.top -= dTop
}
}
}
if (!donotMove) {
target.left = left
target.top = top
}
if (parent.uuid !== '-1') {
updateGroupSize(store, parent.uuid)
// store.dispatch('updateGroupSize', parent.uuid)
}
canvasStore.reChangeCanvas()
// store.dispatch('reChangeCanvas')
}
export function updateGroupSize(store: TWidgetStore, uuid: string) {
const pageStore = usePageStore()
const widgets = store.dWidgets
const group = widgets.find((item) => item.uuid === uuid)
if (!group) return
let left = pageStore.dPage.width
let top = pageStore.dPage.height
let right = 0
let bottom = 0
for (let i = 0; i < widgets.length; ++i) {
if (widgets[i].parent === group.uuid) {
left = Math.min(left, widgets[i].left)
top = Math.min(top, widgets[i].top)
right = Math.max(right, widgets[i].record.width + widgets[i].left)
bottom = Math.max(bottom, widgets[i].record.height + widgets[i].top)
}
}
group.width = right - left
group.height = bottom - top
group.left = left
group.top = top
}
export function updateHoverUuid(store: TWidgetStore, uuid: string) {
store.dHoverUuid = uuid
}
/**
* 设置拖拽时在哪个图层
*/
export function setDropOver(store: TWidgetStore, uuid: string) {
store.dDropOverUuid = uuid
}
export function setMouseEvent(state: TWidgetStore, e: MouseEvent | null) {
state.activeMouseEvent = e
}

104
src/store/design/widget/actions/layer.ts Normal file
View File

@ -0,0 +1,104 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-28 14:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { useForceStore } from "@/store"
import { TWidgetStore, TdWidgetData } from ".."
export type TupdateLayerIndexData = {
uuid: string
value: number
isGroup?: boolean
}
export function updateLayerIndex(store: TWidgetStore, { uuid, value, isGroup }: TupdateLayerIndexData) {
const widgets = store.dWidgets
const widget = widgets.find((item) => item.uuid === uuid)
const index = widgets.findIndex((item) => item.uuid === uuid)
let group: TdWidgetData[] = []
if (!widget) return
if (isGroup) {
// 组合组件移动
group = widgets.filter((item) => item.parent === uuid)
for (let i = 0; i < group.length; ++i) {
const pos = widgets.findIndex((item) => item.uuid === group[i].uuid)
widgets.splice(pos, 1)
}
}
// 单个组件移动，组合的把容器内的组件取出来后也相当于是移动单个组件
let next = index + value
let move = false
const maxLen = widgets.length
let gCount = 1 // 记录跳过的组合数量
// 循环找出要目标位置并移动（因为存在组合，所以不能直接移动到下一个位置）
while (next >= 0 && next < maxLen) {
const nextWidget = widgets[next]
if (widget.parent !== '-1') {
// 如果是在容器里面，比较简单，只要目标组件的父容器一样就移动，不一样说明出了容器了就不移动
if (nextWidget.parent === widget.parent) {
widgets.splice(index, 1)
widgets.splice(next, 0, widget)
move = true
}
break
// 如果父容器一样并且（目标组件不是容器或者先上移动并且目标组件是容器），则是要移动的位置
} else if (nextWidget.parent === '-1') {
if ((gCount === 0 && nextWidget.isContainer) || !nextWidget.isContainer || (value < 0 && nextWidget.isContainer)) {
if (gCount === 0 && value > 0) {
next -= value
}
widgets.splice(index, 1)
widgets.splice(next, 0, widget)
move = true
break
} else if (nextWidget.isContainer) {
gCount = 0
}
}
next += value
}
next -= value
if (!move && next !== index) {
widgets.splice(index, 1)
widgets.splice(next, 0, widget)
}
// 如果是组合，要把里面的组件添加回去
if (isGroup) {
const pos = widgets.findIndex((item) => item.uuid === uuid)
for (let i = group.length - 1; i >= 0; --i) {
widgets.splice(pos + 1, 0, group[i])
}
}
}
// TODO: 取消组合
export function ungroup(store: TWidgetStore, uuid: string) {
const forceStore = useForceStore()
const widgets = store.dWidgets
const index = widgets.findIndex((item) => item.uuid === uuid)
widgets.splice(index, 1)
const len = widgets.length
for (let i = 0; i < len; ++i) {
if (widgets[i].parent === uuid) {
widgets[i].parent = '-1'
// store.state.dAltDown = true
// store.dispatch('selectWidgetsInOut', { uuid: widgets[i].uuid })
store.dSelectWidgets.push(widgets[i])
}
}
// store.state.dAltDown = false
forceStore.setUpdateSelect()
// store.commit('updateSelect')
// store.state.dActiveElement = store.state.dPage
}

126
src/store/design/widget/actions/resize.ts Normal file
View File

@ -0,0 +1,126 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description: Store方法export
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { useCanvasStore, useControlStore, usePageStore } from "@/store"
import { TWidgetStore } from ".."
import { updateGroupSize } from "."
export type TInitResize = {
startX: number
startY: number
originX: number
originY: number
width: number
height: number
}
/** 设置 resize 操作的初始值 */
export function initDResize(store: TWidgetStore, payload: TInitResize) {
const mouseXY = store.dMouseXY
const widgetXY = store.dActiveWidgetXY
const resizeWH = store.dResizeWH
mouseXY.x = payload.startX
mouseXY.y = payload.startY
widgetXY.x = payload.originX
widgetXY.y = payload.originY
resizeWH.width = payload.width
resizeWH.height = payload.height
}
export type TdResizePayload = {
x: number
y: number
/** 方向 */
dirs: "top" | "left" | "bottom" | "right"
}
/** 更新组件宽高 */
export function dResize(store: TWidgetStore, { x, y, dirs }: TdResizePayload) {
const pageStore = usePageStore()
const canvasStore = useCanvasStore()
const controlStore = useControlStore()
controlStore.setdResizeing(true)
// store.state.dResizeing = true
const page = pageStore.dPage
const target = store.dActiveElement
const mouseXY = store.dMouseXY
const widgetXY = store.dActiveWidgetXY
const resizeWH = store.dResizeWH
let parent = page
if (!target) return
if (target.parent !== '-1') {
const tmp = store.dWidgets.find((item) => item.uuid === target.parent)
if (tmp) {
parent = tmp
}
}
const dx = x - mouseXY.x
const dy = y - mouseXY.y
let left = 0
let top = 0
for (let i = 0; i < dirs.length; ++i) {
const dir = dirs[i]
switch (dir) {
case 'top':
const t = widgetXY.y + Math.floor((dy * 100) / canvasStore.dZoom)
top = Math.max(t, 0)
top = Math.min(widgetXY.y + resizeWH.height - target.record.minHeight, top)
target.height += target.top - top
target.height = Math.max(target.height, target.record.minHeight)
target.top = top
break
case 'bottom':
top = Math.floor((dy * 100) / canvasStore.dZoom)
target.height = resizeWH.height + top
target.height = Math.max(target.height, target.record.minHeight)
target.height = Math.min(target.height, page.height - target.top)
break
case 'left':
const tLeft = widgetXY.x + Math.floor((dx * 100) / canvasStore.dZoom)
left = Math.max(tLeft, 0)
target.width += target.left - left
target.width = Math.max(target.width, target.record.minWidth)
left = Math.min(widgetXY.x + resizeWH.width - target.record.minWidth, left)
target.left = left
break
case 'right':
left = Math.floor((dx * 100) / canvasStore.dZoom)
target.width = resizeWH.width + left
target.width = Math.max(target.width, target.record.minWidth)
target.width = Math.min(target.width, page.width - target.left)
break
}
}
if (parent.uuid !== '-1') {
updateGroupSize(store, parent.uuid)
// store.dispatch('updateGroupSize', parent.uuid)
}
canvasStore.reChangeCanvas()
// store.dispatch('reChangeCanvas')
}
export type TResize = {
width: number
height: number
}
export function resize(state: TWidgetStore, data: TResize) {
const { width, height } = data
const target = state.dActiveElement
if (!target) return target
target.width = width
target.height = height
}

107
src/store/design/widget/actions/select.ts Normal file
View File

@ -0,0 +1,107 @@
import { useControlStore, useHistoryStore, usePageStore } from "@/store"
import { TWidgetStore } from ".."
import { proxyToObject } from "@/utils/utils"
export type TSelectWidgetData = {
uuid: string
}
// TODO: 选中元件与取消选中
export function selectWidget(store: TWidgetStore, { uuid }: TSelectWidgetData) {
const controlStore = useControlStore()
const pageStore = usePageStore()
const historyStore = useHistoryStore()
const alt = controlStore.dAltDown
const selectWidgets = store.dSelectWidgets
const widget = store.dWidgets.find((item) => item.uuid === uuid)
if (alt) {
if (!widget) return
if (uuid !== '-1' && widget.parent === '-1') {
// && !widget.isContainer
if (selectWidgets.length === 0) {
if (store.dActiveElement && store.dActiveElement.uuid !== '-1') {
selectWidgets.push(store.dActiveElement)
}
}
const index = selectWidgets.findIndex((item) => {
return item.uuid === uuid
})
// 如果已经存在则取消选择，否则加入选取
if (index !== -1) {
selectWidgets.splice(index, 1)
if (selectWidgets.length === 0) {
store.dActiveElement = pageStore.dPage
}
} else {
selectWidgets.push(widget)
}
if (selectWidgets.length === 1) {
store.dActiveElement = selectWidgets[0]
store.dSelectWidgets = []
}
}
return
}
store.dSelectWidgets = []
console.log("uuid", uuid);
if (uuid === '-1') {
store.dActiveElement = pageStore.dPage
const pageHistory = historyStore.dPageHistory
if (pageHistory.length === 0) {
pageHistory.push(JSON.stringify(proxyToObject(pageStore.dPage)))
}
setTimeout(() => {
store.dSelectWidgets = []
}, 10)
} else {
if (!widget) return
// store.state.dActiveElement = {}
setTimeout(() => {
store.dActiveElement = widget
}, 10)
}
}
/** 多选元素 */
export function selectWidgetsInOut(store: TWidgetStore, { uuid }: TSelectWidgetData) {
const pageStore = usePageStore()
const selectWidgets = store.dSelectWidgets
const widget = store.dWidgets.find((item) => item.uuid === uuid)
if (widget && uuid !== '-1' && widget.parent === '-1' && !widget.isContainer) {
if (selectWidgets.length === 0) {
if (store.dActiveElement && store.dActiveElement.uuid !== '-1') {
selectWidgets.push(store.dActiveElement)
}
}
const index = selectWidgets.findIndex((item) => {
return item.uuid === uuid
})
// 如果已经存在则取消选择，否则加入选取
if (index !== -1) {
selectWidgets.splice(index, 1)
if (selectWidgets.length === 0) {
store.dActiveElement = pageStore.dPage
}
} else {
selectWidgets.push(widget)
}
// if (selectWidgets.length === 1) {
// store.state.dActiveElement = selectWidgets[0]
// store.state.dSelectWidgets = []
// }
}
}
export type TselectItem = {
data?: Record<string, any>
type?: string
}
export function selectItem(state: TWidgetStore, { data, type }: TselectItem) {
state.selectItem.data = data
state.selectItem.type = type
}

30
src/store/design/widget/actions/template.ts Normal file
View File

@ -0,0 +1,30 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-28 21:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { customAlphabet } from 'nanoid/non-secure'
import { TWidgetStore, TdWidgetData } from '..'
import { useCanvasStore, useHistoryStore } from '@/store'
const nanoid = customAlphabet('1234567890abcdef', 12)
// TODO: 选择模板
export function setTemplate(store: TWidgetStore, allWidgets: TdWidgetData[]) {
const historyStore = useHistoryStore()
const canvasStore = useCanvasStore()
allWidgets.forEach((item) => {
Number(item.uuid) < 0 && (item.uuid = nanoid()) // 重设id
item.text && (item.text = decodeURIComponent(item.text))
store.dWidgets.push(item)
})
historyStore.pushHistory("setTemplate")
// store.dispatch('pushHistory', 'setTemplate')
canvasStore.reChangeCanvas()
// store.dispatch('reChangeCanvas')
}

237
src/store/design/widget/actions/widget.ts Normal file
View File

@ -0,0 +1,237 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-28 21:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { useCanvasStore, useHistoryStore, usePageStore } from "@/store"
import { TWidgetStore, TdWidgetData } from ".."
import { customAlphabet } from 'nanoid/non-secure'
const nanoid = customAlphabet('1234567890abcdef', 12)
type TUpdateWidgetKey = keyof TdWidgetData
export type TUpdateWidgetPayload = {
uuid: string
key: TUpdateWidgetKey
value: number | string | boolean | Record<string, any>
pushHistory?: boolean
}
/** 更新组件数据 */
export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHistory }: TUpdateWidgetPayload) {
const widget = store.dWidgets.find((item) => item.uuid === uuid)
if (widget && (widget[key] !== value || pushHistory)) {
switch (key) {
case 'width':
// const minWidth = widget.record.minWidth
// const maxWidth = store.state.dPage.width - widget.left
// value = Math.max(minWidth, Math.min(maxWidth, value))
break
case 'height':
// const minHeight = widget.record.minHeight
// const maxHeight = store.state.dPage.height - widget.top
// value = Math.max(minHeight, Math.min(maxHeight, value))
break
case 'left':
case 'top':
if (widget.isContainer) {
let dLeft = widget.left - Number(value)
let dTop = widget.top - Number(value)
if (key === 'left') {
dTop = 0
}
if (key === 'top') {
dLeft = 0
}
const len = store.dWidgets.length
for (let i = 0; i < len; ++i) {
const child = store.dWidgets[i]
if (child.parent === widget.uuid) {
child.left -= dLeft
child.top -= dTop
}
}
}
break
}
(widget[key] as TUpdateWidgetPayload['value']) = value
if (pushHistory) {
const historyStore = useHistoryStore()
setTimeout(() => {
historyStore.pushHistory("updateWidgetData")
// pushHistory && store.dispatch('pushHistory', 'updateWidgetData')
}, 100)
}
// store.dispatch('reChangeCanvas')
}
}
export type TUpdateWidgetMultiplePayload = {
uuid: string
data: {
key: TUpdateWidgetKey
value: number
}[]
pushHistory?: boolean
}
/** 一次更新多个widget */
export function updateWidgetMultiple(store: TWidgetStore, { uuid, data, pushHistory }: TUpdateWidgetMultiplePayload) {
for (const item of data) {
const { key, value } = item
const widget = store.dWidgets.find((item) => item.uuid === uuid)
if (widget && (widget[key] !== value || pushHistory)) {
switch (key) {
case 'left':
case 'top':
if (widget.isContainer) {
let dLeft = widget.left - value
let dTop = widget.top - value
if (key === 'left') {
dTop = 0
}
if (key === 'top') {
dLeft = 0
}
const len = store.dWidgets.length
for (let i = 0; i < len; ++i) {
const child = store.dWidgets[i]
if (child.parent === widget.uuid) {
child.left -= dLeft
child.top -= dTop
}
}
}
break
}
(widget[key] as number | string) = value
}
}
setTimeout(() => {
const historyStore = useHistoryStore()
historyStore.pushHistory("updateWidgetMultiple")
// store.dispatch('pushHistory', 'updateWidgetMultiple')
}, 100)
}
/** 添加 Widget */
export function addWidget(store: TWidgetStore, setting: TdWidgetData) {
const historyStore = useHistoryStore()
const canvasStore = useCanvasStore()
setting.uuid = nanoid()
store.dWidgets.push(setting)
const len = store.dWidgets.length
// store.state.dActiveElement = store.state.dWidgets[len - 1]
store.selectWidget({
uuid: store.dWidgets[len - 1].uuid,
})
// store.dispatch('selectWidget', {
// uuid: store.dWidgets[len - 1].uuid,
// })
historyStore.pushHistory("addWidget")
// store.dispatch('pushHistory', 'addWidget')
canvasStore.reChangeCanvas()
// store.dispatch('reChangeCanvas')
}
/** 删除组件 */
export function deleteWidget(store: TWidgetStore) {
const historyStore = useHistoryStore()
const canvasStore = useCanvasStore()
const widgets = store.dWidgets
const selectWidgets = store.dSelectWidgets
const activeElement = store.dActiveElement
if (!activeElement) return
let count = 0 // 记录容器里的组件数量
if (selectWidgets.length !== 0) {
for (let i = 0; i < selectWidgets.length; ++i) {
const uuid = selectWidgets[i].uuid
const index = widgets.findIndex((item) => item.uuid === uuid)
widgets.splice(index, 1)
try {
// 清除掉可能存在的选中框
document.getElementById(uuid)?.classList.remove('widget-selected')
} catch (e) {}
}
store.dSelectWidgets = []
} else {
if (activeElement.type === 'page') {
return
}
const uuid = activeElement.uuid
const index = widgets.findIndex((item) => item.uuid === uuid)
// 先删除组件
widgets.splice(index, 1)
// 如果删除的是容器，须将内部组件一并删除
if (activeElement.isContainer) {
for (let i = widgets.length - 1; i >= 0; --i) {
if (widgets[i].parent === uuid) {
widgets.splice(i, 1)
}
}
} else if (activeElement.parent !== '-1') {
for (let i = widgets.length - 1; i >= 0; --i) {
if (widgets[i].parent === activeElement.parent) {
count++
if (count > 1) {
break
}
}
}
if (count <= 1) {
const index = widgets.findIndex((item) => item.uuid === activeElement.parent)
widgets.splice(index, 1)
if (count === 1) {
const widget = widgets.find((item) => item.parent === activeElement.parent)
widget && (widget.parent = '-1')
}
count = 0
}
}
}
if (count === 0) {
// 重置 activeElement
const pageStore = usePageStore()
store.dActiveElement = pageStore.dPage
} else {
const tmp = widgets.find((item) => item.uuid === activeElement.parent)
tmp && (store.dActiveElement = tmp)
}
if (store.dActiveElement && store.dActiveElement.uuid !== '-1') {
store.updateGroupSize(store.dActiveElement.uuid)
// store.dispatch('updateGroupSize', store.dActiveElement.uuid)
}
historyStore.pushHistory("deleteWidget")
// store.dispatch('pushHistory', 'deleteWidget')
canvasStore.reChangeCanvas()
// store.dispatch('reChangeCanvas')
}
export type TsetWidgetStyleData = {
uuid: string
key: keyof TdWidgetData
value: any
pushHistory?: boolean
}
export function setWidgetStyle(state: TWidgetStore, { uuid, key, value, pushHistory }: TsetWidgetStyleData) {
const widget = state.dWidgets.find((item) => item.uuid === uuid)
if (!widget) return
(widget[key] as Record<string, any>) = value
}
export function setDWidgets(state: TWidgetStore, e: TdWidgetData[]) {
state.dWidgets = e
}

25
src/store/design/widget/getter/index.ts Normal file
View File

@ -0,0 +1,25 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-28 14:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { usePageStore } from "@/store"
import { TWidgetState, TdWidgetData } from ".."
import { TPageState } from "../../page"
export type TWidgetJsonData = TPageState & {
widgets: TdWidgetData
}
/** 返回组件Json数据 */
export function widgetJsonData(state: TWidgetState) {
const pageStore = usePageStore()
const page: TWidgetJsonData = JSON.parse(JSON.stringify(pageStore.dPage))
const widgets = JSON.parse(JSON.stringify(state.dWidgets))
page.widgets = widgets
return page
}

184
src/store/design/widget/index.ts Normal file
View File

@ -0,0 +1,184 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description: Store方法export
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-28 14:00:00
*/
import { Store, defineStore } from "pinia";
import { TInidDMovePayload, TMovePayload, dMove, initDMove, setDropOver, setMouseEvent, updateGroupSize, updateHoverUuid } from "./actions";
import { TPageState } from "../page";
import { TInitResize, TResize, TdResizePayload, dResize, initDResize, resize } from "./actions/resize";
import { TUpdateWidgetMultiplePayload, TUpdateWidgetPayload, TsetWidgetStyleData, addWidget, deleteWidget, setDWidgets, setWidgetStyle, updateWidgetData, updateWidgetMultiple } from "./actions/widget";
import { addGroup } from "./actions/group";
import { setTemplate } from "./actions/template";
import { copyWidget, pasteWidget } from "./actions/clone";
import { TSelectWidgetData, TselectItem, selectItem, selectWidget, selectWidgetsInOut } from "./actions/select";
import { TUpdateAlignData, updateAlign } from "./actions/align";
import { TWidgetJsonData, widgetJsonData } from "./getter";
import { TupdateLayerIndexData, ungroup, updateLayerIndex } from "./actions/layer";
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 = {
dActiveWidgetXY: {
/** 选中组件的横向初始值 */
x: number,
/** 选中组件的纵向初始值 */
y: number
}
dMouseXY: {
/** 鼠标按下时的横坐标 */
x: number
/** 鼠标按下时的纵坐标 */
y: number
},
/** 初始化调整大小时组件的宽高 */
dResizeWH: {
width: number
height: number
},
/** 选中的组件或页面 */
dActiveElement: TdWidgetData | null
/** 鼠标在这个图层上 */
dHoverUuid: string
/** 拖动时放在哪个图层上 */
dDropOverUuid: string
/** 已使用的组件 */
dWidgets: TdWidgetData[]
/** 记录多选的组件 */
dSelectWidgets: TdWidgetData[]
/** 复制的组件（可能是单个也可能是数组） */
dCopyElement: TdWidgetData[]
/** 记录当前选择的元素, data */
selectItem: { data?: Record<string, any> | null, type?: string }
/** 正在活动的鼠标事件 */
activeMouseEvent: MouseEvent | null
}
type TGetter = {
getWidgetJsonData(state: TWidgetState): TWidgetJsonData
}
type TAction = {
/** 设置 mousemove 操作的初始值 */
initDMove: (payload: TInidDMovePayload) => void
/** 移动组件 */
dMove: (payload: TMovePayload) => void
updateGroupSize: (uuid: string) => void
/** 设置 resize 操作的初始值 */
initDResize: (payload: TInitResize) => void
dResize: (payload: TdResizePayload) => void
updateHoverUuid: (uuid: string) => void
/** 更新组件数据 */
updateWidgetData: (payload: TUpdateWidgetPayload) => void
/** 一次更新多个widget */
updateWidgetMultiple: (payload: TUpdateWidgetMultiplePayload) => void
/** addWidget */
addWidget: (setting: TdWidgetData) => void
/** addGroup */
addGroup: (group: TdWidgetData[]) => void
/** setTemplate */
setTemplate: (template: TdWidgetData[]) => void
/** 删除组件 */
deleteWidget: () => void
/** 拷贝组件 */
copyWidget: () => void
/** 粘贴组件 */
pasteWidget: () => void
selectWidget: (data: TSelectWidgetData) => void
/** 多选元素 */
selectWidgetsInOut: (data: TSelectWidgetData) => void
/** updateAlign */
updateAlign: (data: TUpdateAlignData) => void
/** updateLayerIndex */
updateLayerIndex: (data: TupdateLayerIndexData) => void
/** ungroup */
ungroup: (uuid: string) => void
/** 设置拖拽时在哪个图层 */
setDropOver: (uuid: string) => void
setSelectItem: (data: TselectItem) => void
resize: (data: TResize) => void
setWidgetStyle: (data: TsetWidgetStyleData) => void
setDWidgets: (data: TdWidgetData[]) => void
setMouseEvent: (e: MouseEvent | null) => void
}
const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("widgetStore", {
state: () => ({
dActiveWidgetXY: {
x: 0, // 选中组件的横向初始值
y: 0, // 选中组件的纵向初始值
},
dMouseXY: {
x: 0, // 鼠标按下时的横坐标
y: 0, // 鼠标按下时的纵坐标
},
dResizeWH: {
// 初始化调整大小时组件的宽高
width: 0,
height: 0,
},
dActiveElement: null, // 选中的组件或页面
dHoverUuid: '-1', // 鼠标在这个图层上
dDropOverUuid: '', // 拖动时放在哪个图层上
dWidgets: [], // 已使用的组件
dSelectWidgets: [], // 记录多选的组件
selectItem: { data: null }, // 记录当前选择的元素, data
activeMouseEvent: null, // 正在活动的鼠标事件
dCopyElement: [], // 复制的组件（可能是单个也可能是数组）
}),
getters: {
getWidgetJsonData(store) {
return widgetJsonData(store)
}
},
actions: {
initDMove(payload) { initDMove(this, payload) },
dMove(payload) { dMove(this, payload) },
updateGroupSize(uuid) { updateGroupSize(this, uuid) },
initDResize(payload) { initDResize(this, payload) },
dResize(payload) { dResize(this, payload) },
updateHoverUuid(uuid) { updateHoverUuid(this, uuid) },
updateWidgetData(payload) { updateWidgetData(this, payload) },
updateWidgetMultiple(payload) { updateWidgetMultiple(this, payload) },
addWidget(setting) { addWidget(this, setting) },
addGroup(group) { addGroup(this, group) },
setTemplate(template) { setTemplate(this, template) },
deleteWidget() { deleteWidget(this) },
copyWidget() { copyWidget(this) },
pasteWidget() { pasteWidget(this) },
selectWidget(data) { selectWidget(this, data) },
selectWidgetsInOut(data) { selectWidgetsInOut(this, data) },
updateAlign(data) { updateAlign(this, data) },
updateLayerIndex(data) { updateLayerIndex(this, data) },
ungroup(uuid) { ungroup(this, uuid) },
setDropOver(uuid) { setDropOver(this, uuid) },
setSelectItem(data: TselectItem) { selectItem(this, data) },
resize(data) { resize(this, data) },
setWidgetStyle(data) { setWidgetStyle(this, data) },
setDWidgets(data) { setDWidgets(this, data) },
setMouseEvent(event) { setMouseEvent(this, event) }
}
})
export type TWidgetStore = Store<"widgetStore", TWidgetState, TGetter, TAction>
export default WidgetStore

36
src/store/index.ts
View File

@ -1,11 +1,29 @@
import { createStore } from 'vuex'
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description: Store方法export
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-18 21:00:00
*/
import base from './modules/base'
import design from './modules/design'
import useBaseStore from "./base";
import useUserStore from "./base/user";
import usePageStore from "./design/page"
import useCanvasStore from "./design/canvas"
import useControlStore from './design/control'
import useHistoryStore from './design/history'
import useWidgetStore from './design/widget'
import useGroupStore from './design/group'
import useForceStore from './design/force'
export default createStore({
...base,
modules: {
design,
},
})
export {
useBaseStore,
useUserStore,
usePageStore,
useCanvasStore,
useControlStore,
useHistoryStore,
useWidgetStore,
useGroupStore,
useForceStore,
}

19
src/store/modules/base/actions.ts
View File

@ -1,19 +0,0 @@
/**
* 异步操作 store.dispatch() 调用
*/
interface Iprops {
commit: (a: any, b: any) => void
state: any
}
export default {
hideLoading(props: Iprops, data: Type.Object) {
setTimeout(() => {
props.commit('loading', false)
}, 600)
},
setFonts(store: Iprops, list: Type.Object) {
store.state.fonts = list
},
}

52
src/store/modules/base/index.ts
View File

@ -1,52 +0,0 @@
/*
* @Author: ShawnPhang
* @Date: 2021-12-16 16:20:16
* @Description:
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-09-28 17:42:25
*/
import mutations from './mutations'
import actions from './actions'
import _config from '@/config'
const all = {
state: {
loading: null,
online: true, // 登录状态，
user: {
name: localStorage.getItem('username'),
}, // 储存用户信息
scroll: true,
manager: '', // 是否为管理员模式
tempEditing: false, // 管理员是否正在编辑模板
fonts: [], // 缓存字体列表
app: null, // 抠图服务
},
getters: {
online: (state: Type.Object) => {
return state.online
},
user: (state: Type.Object) => {
return state.user
},
manager: (state: Type.Object) => {
return state.manager
},
tempEditing: (state: Type.Object) => {
return state.tempEditing
},
fonts: (state: Type.Object) => {
return state.fonts
},
app: (state: Type.Object) => {
return state.app
}
},
mutations: {
...mutations,
},
actions: {
...actions,
},
}
export default all

42
src/store/modules/base/mutations.ts
View File

@ -1,42 +0,0 @@
/*
* @Author: ShawnPhang
* @Date: 2021-12-16 16:20:16
* @Description: 同步操作 store.commit() 调用
* @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-07-13 18:29:13
*/
// import { Toast } from 'vant'
export default {
loading(state: Type.Object, data: any) {
// Toast.clear();
// let msg = ''
// if (typeof data === 'string') {
// msg = data
// } else {
// Toast.clear();
// return false
// }
// Toast.loading({
// duration: 0, // 持续展示 toast
// loadingType: 'spinner',
// message: msg
// });
},
changeRoute(state: Type.Object, from: string) {
state.routeFrom = from
},
changeOnline(state: Type.Object, status: string) {
state.online = status
},
changeUser(state: Type.Object, name: string) {
state.user.name = name
// state.user = Object.assign({}, state.user)
state.user = { ...state.user }
localStorage.setItem('username', name)
},
managerEdit(state: Type.Object, status: string) {
state.tempEditing = status
}
}

828
src/store/modules/design/actions.ts
View File

@ -1,828 +0,0 @@
// import { nextTick } from 'vue'
import { customAlphabet } from 'nanoid/non-secure'
const nanoid = customAlphabet('1234567890abcdef', 12)
import pushHistory from './methods/pushHistory'
import handleHistory from './methods/handleHistory'
export default {
/**
* 保存操作历史，
* 修改数据、移动完成后都会自动保存
* 同时会保存当前激活的组件的uuid，方便撤回时自动激活
*/
pushHistory(store: any, msg: string) {
pushHistory(store, msg)
},
/**
* 操作历史记录
* action为undo表示撤销
* action为redo表示重做
*/
handleHistory(store: any, action: any) {
handleHistory(store, action)
// 激活组件默认为page
store.state.dActiveElement = store.state.dPage
},
updateZoom(store, zoom) {
store.state.dZoom = zoom
},
updateScreen(store, { width, height }) {
store.state.dScreen.width = width
store.state.dScreen.height = height
},
// updateGridSize(store, { width, height }) {
// store.state.gridSize.width = width
// store.state.gridSize.height = height
// },
updatePageData(store, { key, value, pushHistory }) {
const page = store.state.dPage
if (page[key] !== value || pushHistory) {
page[key] = value
// 画布修改先不压入历史栈，因为替换模板后会重复压栈
// store.dispatch('pushHistory', 'updatePageData')
}
},
updateWidgetData(store, { uuid, key, value, pushHistory }: any) {
const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
if (widget && (widget[key] !== value || pushHistory)) {
switch (key) {
case 'width':
// const minWidth = widget.record.minWidth
// const maxWidth = store.state.dPage.width - widget.left
// value = Math.max(minWidth, Math.min(maxWidth, value))
break
case 'height':
// const minHeight = widget.record.minHeight
// const maxHeight = store.state.dPage.height - widget.top
// value = Math.max(minHeight, Math.min(maxHeight, value))
break
case 'left':
case 'top':
if (widget.isContainer) {
let dLeft = widget.left - value
let dTop = widget.top - value
if (key === 'left') {
dTop = 0
}
if (key === 'top') {
dLeft = 0
}
const len = store.state.dWidgets.length
for (let i = 0; i < len; ++i) {
const child = store.state.dWidgets[i]
if (child.parent === widget.uuid) {
child.left -= dLeft
child.top -= dTop
}
}
}
break
}
widget[key] = value
if (pushHistory) {
setTimeout(() => {
pushHistory && store.dispatch('pushHistory', 'updateWidgetData')
}, 100)
}
// store.dispatch('reChangeCanvas')
}
},
updateWidgetMultiple(store, { uuid, data, pushHistory }) {
for (const item of data) {
const { key, value } = item
const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
if (widget && (widget[key] !== value || pushHistory)) {
switch (key) {
case 'left':
case 'top':
if (widget.isContainer) {
let dLeft = widget.left - value
let dTop = widget.top - value
if (key === 'left') {
dTop = 0
}
if (key === 'top') {
dLeft = 0
}
const len = store.state.dWidgets.length
for (let i = 0; i < len; ++i) {
const child = store.state.dWidgets[i]
if (child.parent === widget.uuid) {
child.left -= dLeft
child.top -= dTop
}
}
}
break
}
widget[key] = value
}
}
setTimeout(() => {
store.dispatch('pushHistory', 'updateWidgetMultiple')
}, 100)
},
addWidget(store: any, setting: any) {
setting.uuid = nanoid()
store.state.dWidgets.push(setting)
const len = store.state.dWidgets.length
// store.state.dActiveElement = store.state.dWidgets[len - 1]
store.dispatch('selectWidget', {
uuid: store.state.dWidgets[len - 1].uuid,
})
store.dispatch('pushHistory', 'addWidget')
store.dispatch('reChangeCanvas')
},
addGroup(store: any, group: Type.Object) {
let parent: any = null
group.forEach((item: any) => {
item.uuid = nanoid() // 重设id
item.type === 'w-group' && (parent = item) // 找出父组件
})
group.forEach((item: any) => {
!item.isContainer && (item.parent = parent.uuid) // 重设父id
item.text && (item.text = decodeURIComponent(item.text))
store.state.dWidgets.push(item)
})
// 选中组件
const len = store.state.dWidgets.length
store.state.dActiveElement = store.state.dWidgets[len - 1]
store.dispatch('pushHistory', 'addGroup')
store.dispatch('reChangeCanvas')
},
// TODO: 选择模板
setTemplate(store: any, allWidgets: any[]) {
allWidgets.forEach((item: any) => {
Number(item.uuid) < 0 && (item.uuid = nanoid()) // 重设id
item.text && (item.text = decodeURIComponent(item.text))
store.state.dWidgets.push(item)
})
store.dispatch('pushHistory', 'setTemplate')
store.dispatch('reChangeCanvas')
},
// TODO 删除
deleteWidget(store: any) {
const widgets = store.state.dWidgets
const selectWidgets = store.state.dSelectWidgets
const activeElement = store.state.dActiveElement
let count = 0 // 记录容器里的组件数量
if (selectWidgets.length !== 0) {
for (let i = 0; i < selectWidgets.length; ++i) {
const uuid = selectWidgets[i].uuid
const index = widgets.findIndex((item) => item.uuid === uuid)
widgets.splice(index, 1)
try {
// 清除掉可能存在的选中框
document.getElementById(uuid).classList.remove('widget-selected')
} catch (e) {}
}
store.state.dSelectWidgets = []
} else {
if (activeElement.type === 'page') {
return
}
const uuid = activeElement.uuid
const index = widgets.findIndex((item) => item.uuid === uuid)
// 先删除组件
widgets.splice(index, 1)
// 如果删除的是容器，须将内部组件一并删除
if (activeElement.isContainer) {
for (let i = widgets.length - 1; i >= 0; --i) {
if (widgets[i].parent === uuid) {
widgets.splice(i, 1)
}
}
} else if (activeElement.parent !== '-1') {
for (let i = widgets.length - 1; i >= 0; --i) {
if (widgets[i].parent === activeElement.parent) {
count++
if (count > 1) {
break
}
}
}
if (count <= 1) {
const index = widgets.findIndex((item) => item.uuid === activeElement.parent)
widgets.splice(index, 1)
if (count === 1) {
const widget = widgets.find((item) => item.parent === activeElement.parent)
widget.parent = '-1'
}
count = 0
}
}
}
if (count === 0) {
// 重置 activeElement
store.state.dActiveElement = store.state.dPage
} else {
store.state.dActiveElement = widgets.find((item) => item.uuid === activeElement.parent)
}
if (store.state.dActiveElement.uuid !== '-1') {
store.dispatch('updateGroupSize', store.state.dActiveElement.uuid)
}
store.dispatch('pushHistory', 'deleteWidget')
store.dispatch('reChangeCanvas')
},
copyWidget(store) {
const activeElement = JSON.parse(JSON.stringify(store.state.dActiveElement))
if (activeElement.type === 'page') {
return
}
navigator.clipboard.writeText('') // 清空系统剪贴板内容
const container = []
const selectWidgets = store.state.dSelectWidgets
if (selectWidgets.length === 0) {
const uuid = activeElement.uuid
container.push(activeElement)
if (activeElement.isContainer) {
const widgets = store.state.dWidgets
for (let i = 0; i < widgets.length; ++i) {
if (widgets[i].parent === uuid) {
container.push(widgets[i])
}
}
}
} else {
for (let i = 0; i < selectWidgets.length; ++i) {
const uuid = selectWidgets[i].uuid
container.push(selectWidgets[i])
if (selectWidgets[i].isContainer) {
const widgets = store.state.dWidgets
for (let i = 0; i < widgets.length; ++i) {
if (widgets[i].parent === uuid) {
container.push(widgets[i])
}
}
}
}
}
store.state.dCopyElement = JSON.parse(JSON.stringify(container))
},
pasteWidget(store) {
const copyElement = JSON.parse(JSON.stringify(store.state.dCopyElement))
const container = copyElement.find((item) => item.isContainer)
for (let i = 0; i < copyElement.length; ++i) {
copyElement[i].uuid = nanoid()
if (container && copyElement[i].uuid !== container.uuid) {
copyElement[i].parent = container.uuid
} else {
copyElement[i].parent = '-1'
}
copyElement[i].top += 30
copyElement[i].left += 30
}
store.state.dWidgets = store.state.dWidgets.concat(copyElement)
store.state.dActiveElement = copyElement[0]
store.state.dSelectWidgets = copyElement
if (container) {
store.state.dActiveElement = container
store.state.dSelectWidgets = []
}
store.dispatch('pushHistory', 'pasteWidget')
store.dispatch('copyWidget')
store.dispatch('reChangeCanvas')
},
// TODO: 选中元件与取消选中
selectWidget(store, { uuid }) {
const alt = store.state.dAltDown
const selectWidgets = store.state.dSelectWidgets
const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
if (alt) {
if (uuid !== '-1' && widget.parent === '-1') {
// && !widget.isContainer
if (selectWidgets.length === 0) {
if (store.state.dActiveElement.uuid !== '-1') {
selectWidgets.push(store.state.dActiveElement)
}
}
const index = selectWidgets.findIndex((item) => {
return item.uuid === uuid
})
// 如果已经存在则取消选择，否则加入选取
if (index !== -1) {
selectWidgets.splice(index, 1)
if (selectWidgets.length === 0) {
store.state.dActiveElement = store.state.dPage
}
} else {
selectWidgets.push(widget)
}
if (selectWidgets.length === 1) {
store.state.dActiveElement = selectWidgets[0]
store.state.dSelectWidgets = []
}
}
return
}
store.state.dSelectWidgets = []
if (uuid === '-1') {
store.state.dActiveElement = store.state.dPage
const pageHistory = store.state.dPageHistory
if (pageHistory.length === 0) {
pageHistory.push(JSON.stringify(store.state.dPage))
}
setTimeout(() => {
store.state.dSelectWidgets = []
}, 10)
} else {
// store.state.dActiveElement = {}
setTimeout(() => {
store.state.dActiveElement = widget
}, 10)
}
},
// 多选元素
selectWidgetsInOut(store, { uuid }) {
const selectWidgets = store.state.dSelectWidgets
const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
if (widget && uuid !== '-1' && widget.parent === '-1' && !widget.isContainer) {
if (selectWidgets.length === 0) {
if (store.state.dActiveElement.uuid !== '-1') {
selectWidgets.push(store.state.dActiveElement)
}
}
const index = selectWidgets.findIndex((item) => {
return item.uuid === uuid
})
// 如果已经存在则取消选择，否则加入选取
if (index !== -1) {
selectWidgets.splice(index, 1)
if (selectWidgets.length === 0) {
store.state.dActiveElement = store.state.dPage
}
} else {
selectWidgets.push(widget)
}
// if (selectWidgets.length === 1) {
// store.state.dActiveElement = selectWidgets[0]
// store.state.dSelectWidgets = []
// }
}
},
// 设置 mousemove 操作的初始值
initDMove(store, payload) {
const mouseXY = store.state.dMouseXY
const widgetXY = store.state.dActiveWidgetXY
mouseXY.x = payload.startX
mouseXY.y = payload.startY
widgetXY.x = payload.originX
widgetXY.y = payload.originY
},
// 组件移动结束
stopDMove(store) {
if (store.state.dMoving) {
store.dispatch('pushHistory', 'stopDMove')
}
store.state.dMoving = false
},
// 移动组件
dMove(store, payload) {
const { donotMove } = payload // 由moveable代理移动
store.state.dMoving = true
const page = store.state.dPage
const target = store.state.dActiveElement
const mouseXY = store.state.dMouseXY
const widgetXY = store.state.dActiveWidgetXY
let parent = page
if (target.parent !== '-1') {
parent = store.state.dWidgets.find((item) => item.uuid === target.parent)
}
const dx = payload.x - mouseXY.x
const dy = payload.y - mouseXY.y
let left = widgetXY.x + Math.floor((dx * 100) / store.state.dZoom)
let top = widgetXY.y + Math.floor((dy * 100) / store.state.dZoom)
left = Math.max(Math.min(left, page.width - target.record.width), 0)
top = Math.max(Math.min(top, page.height - target.record.height), 0)
if (target.isContainer) {
const dLeft = target.left - left
const dTop = target.top - top
const len = store.state.dWidgets.length
for (let i = 0; i < len; ++i) {
const widget = store.state.dWidgets[i]
if (widget.parent === target.uuid) {
widget.left -= dLeft
widget.top -= dTop
}
}
}
if (!donotMove) {
target.left = left
target.top = top
}
if (parent.uuid !== '-1') {
store.dispatch('updateGroupSize', parent.uuid)
}
store.dispatch('reChangeCanvas')
},
// 设置 resize 操作的初始值
initDResize(store, payload) {
const mouseXY = store.state.dMouseXY
const widgetXY = store.state.dActiveWidgetXY
const resizeWH = store.state.dResizeWH
mouseXY.x = payload.startX
mouseXY.y = payload.startY
widgetXY.x = payload.originX
widgetXY.y = payload.originY
resizeWH.width = payload.width
resizeWH.height = payload.height
},
// 更新组件宽高
dResize(store, { x, y, dirs }) {
store.state.dResizeing = true
const page = store.state.dPage
const target = store.state.dActiveElement
const mouseXY = store.state.dMouseXY
const widgetXY = store.state.dActiveWidgetXY
const resizeWH = store.state.dResizeWH
let parent = page
if (target.parent !== '-1') {
parent = store.state.dWidgets.find((item) => item.uuid === target.parent)
}
const dx = x - mouseXY.x
const dy = y - mouseXY.y
let left = 0
let top = 0
for (let i = 0; i < dirs.length; ++i) {
const dir = dirs[i]
switch (dir) {
case 'top':
const t = widgetXY.y + Math.floor((dy * 100) / store.state.dZoom)
top = Math.max(t, 0)
top = Math.min(widgetXY.y + resizeWH.height - target.record.minHeight, top)
target.height += target.top - top
target.height = Math.max(target.height, target.record.minHeight)
target.top = top
break
case 'bottom':
top = Math.floor((dy * 100) / store.state.dZoom)
target.height = resizeWH.height + top
target.height = Math.max(target.height, target.record.minHeight)
target.height = Math.min(target.height, page.height - target.top)
break
case 'left':
const tLeft = widgetXY.x + Math.floor((dx * 100) / store.state.dZoom)
left = Math.max(tLeft, 0)
target.width += target.left - left
target.width = Math.max(target.width, target.record.minWidth)
left = Math.min(widgetXY.x + resizeWH.width - target.record.minWidth, left)
target.left = left
break
case 'right':
left = Math.floor((dx * 100) / store.state.dZoom)
target.width = resizeWH.width + left
target.width = Math.max(target.width, target.record.minWidth)
target.width = Math.min(target.width, page.width - target.left)
break
}
}
if (parent.uuid !== '-1') {
store.dispatch('updateGroupSize', parent.uuid)
}
store.dispatch('reChangeCanvas')
},
// 组件调整结束
stopDResize(store) {
if (store.state.dResizeing) {
store.dispatch('pushHistory', 'stopDResize')
}
store.state.dResizeing = false
},
// 强制重绘画布
reChangeCanvas(store) {
// const tag = store.state.dPage.tag
// store.state.dPage.tag = tag === 0 ? 0.01 : 0
},
pushColorToHistory(store, color) {
const history = store.state.dColorHistory
// 如果已经存在就提到前面来，避免重复
const index = history.indexOf(color)
if (index !== -1) {
history.splice(index, 1)
}
// 最多保存3种颜色
if (history.length === 4) {
history.splice(history.length - 1, 1)
}
// 把最新的颜色放在头部
const head = [color]
store.state.dColorHistory = head.concat(history)
},
updateHoverUuid(store, uuid) {
store.state.dHoverUuid = uuid
},
showRefLine(store, show) {
store.state.dShowRefLine = show
},
updateAlign(store: any, { align, uuid, group }: any) {
const widgets = store.state.dWidgets
const target = uuid ? widgets.find((item: any) => item.uuid === uuid) : store.state.dActiveElement
let parent = group || store.state.dPage
if (target.parent !== '-1') {
parent = widgets.find((item: any) => item.uuid === target.parent)
}
let left = target.left
let top = target.top
let pw = parent.record.width || parent.width
let ph = parent.record.height || parent.height
if (parent.uuid === '-1') {
pw = parent.width
ph = parent.height
}
const targetW = target.width
const targetH = target.height
switch (align) {
case 'left':
left = parent.left
break
case 'ch': // 水平居中
left = parent.left + pw / 2 - targetW / 2
break
case 'right':
left = parent.left + pw - targetW
break
case 'top':
top = parent.top
break
case 'cv': // 垂直居中
top = parent.top + ph / 2 - targetH / 2
break
case 'bottom':
top = parent.top + ph - targetH
break
}
if (target.left !== left || target.top !== top) {
if (target.isContainer) {
const dLeft = target.left - left
const dTop = target.top - top
const len = widgets.length
for (let i = 0; i < len; ++i) {
const widget = widgets[i]
if (widget.parent === target.uuid) {
widget.left -= dLeft
widget.top -= dTop
}
}
}
target.left = left
target.top = top
store.dispatch('pushHistory', 'updateAlign')
store.dispatch('reChangeCanvas')
}
},
getWidgetJsonData(store) {
const page = JSON.parse(JSON.stringify(store.state.dPage))
const widgets = JSON.parse(JSON.stringify(store.state.dWidgets))
page.widgets = widgets
return page
},
// TODO 组合操作
updateAltDown(store, value) {
store.state.dAltDown = value
console.log('控制组合按键, 成组功能为: realCombined')
},
realCombined(store: any) {
const selectWidgets = store.state.dSelectWidgets
if (selectWidgets.length > 1) {
const widgets = store.state.dWidgets
const group = JSON.parse(store.state.dGroupJson)
group.uuid = nanoid()
widgets.push(group)
let left = Number(store.state.dPage.width)
let top = Number(store.state.dPage.height)
let right = 0
let bottom = 0
const sortWidgets = [] // 顺序取出元素
const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
for (const w of widgets) {
selectkeys.includes(w.uuid) && sortWidgets.push(w)
}
for (let i = 0; i < sortWidgets.length; ++i) {
const uuid = sortWidgets[i].uuid
const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
const widget = { ...widgets[index] } // clone
if (widget.isContainer) {
widgets.splice(index, 1) // 删除旧组合
for (let i = 0; i < widgets.length; i++) {
const item = widgets[i]
item.parent === widget.uuid && (item.parent = group.uuid)
// if (item.parent === widget.uuid) {
// item.parent = group.uuid
// // 重新排列
// // const index = widgets.findIndex((x) => x.uuid === item.uuid)
// // widgets.splice(index, 1)
// // widgets.push(item)
// }
}
} else {
widget.parent = group.uuid
// 重新排列
widgets.splice(index, 1)
widgets.push(widget)
}
// sortWidgets.push({
// index: index,
// widget: widget,
// })
left = Math.min(left, widget.left)
top = Math.min(top, widget.top)
right = Math.max(right, Number(widget.width || widget.record.width) + Number(widget.left))
bottom = Math.max(bottom, Number(widget.height || widget.record.height) + Number(widget.top))
}
// sortWidgets.sort((a, b) => a.index > b.index)
// for (let i = 0; i < sortWidgets.length; ++i) {
// const index = widgets.findIndex((item) => item.uuid === sortWidgets[i].widget.uuid)
// widgets.splice(index, 1)
// widgets.push(sortWidgets[i].widget)
// }
group.left = Number(left)
group.top = Number(top)
group.width = Number(right - left)
group.height = Number(bottom - top)
store.state.dActiveElement = group
store.state.dSelectWidgets = []
store.dispatch('pushHistory', 'realCombined')
// store.dispatch('reChangeCanvas')
}
},
getCombined(store: any) {
const selectWidgets = store.state.dSelectWidgets
return new Promise((resolve) => {
if (selectWidgets.length > 1) {
const widgets = store.state.dWidgets
const group = JSON.parse(store.state.dGroupJson)
group.uuid = nanoid()
// widgets.push(group)
let left = store.state.dPage.width
let top = store.state.dPage.height
let right = 0
let bottom = 0
const sortWidgets = [] // 顺序取出元素
const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
for (const w of widgets) {
selectkeys.includes(w.uuid) && sortWidgets.push(w)
}
for (let i = 0; i < sortWidgets.length; ++i) {
const uuid = sortWidgets[i].uuid
const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
const widget = { ...widgets[index] } // clone
left = Math.min(left, widget.left)
top = Math.min(top, widget.top)
right = Math.max(right, Number(widget.width) + Number(widget.left))
bottom = Math.max(bottom, Number(widget.height) + Number(widget.top))
}
group.left = left
group.top = top
group.width = right - left
group.height = bottom - top
resolve(group)
}
})
},
initGroupJson(store, json) {
store.state.dGroupJson = json
},
updateGroupSize(store, uuid) {
const widgets = store.state.dWidgets
const group = widgets.find((item) => item.uuid === uuid)
let left = store.state.dPage.width
let top = store.state.dPage.height
let right = 0
let bottom = 0
for (let i = 0; i < widgets.length; ++i) {
if (widgets[i].parent === group.uuid) {
left = Math.min(left, widgets[i].left)
top = Math.min(top, widgets[i].top)
right = Math.max(right, widgets[i].record.width + widgets[i].left)
bottom = Math.max(bottom, widgets[i].record.height + widgets[i].top)
}
}
group.width = right - left
group.height = bottom - top
group.left = left
group.top = top
},
updateLayerIndex(store, { uuid, value, isGroup }) {
const widgets = store.state.dWidgets
const widget = widgets.find((item) => item.uuid === uuid)
const index = widgets.findIndex((item) => item.uuid === uuid)
let group = []
if (isGroup) {
// 组合组件移动
group = widgets.filter((item) => item.parent === uuid)
for (let i = 0; i < group.length; ++i) {
const pos = widgets.findIndex((item) => item.uuid === group[i].uuid)
widgets.splice(pos, 1)
}
}
// 单个组件移动，组合的把容器内的组件取出来后也相当于是移动单个组件
let next = index + value
let move = false
const maxLen = widgets.length
let gCount = 1 // 记录跳过的组合数量
// 循环找出要目标位置并移动（因为存在组合，所以不能直接移动到下一个位置）
while (next >= 0 && next < maxLen) {
const nextWidget = widgets[next]
if (widget.parent !== '-1') {
// 如果是在容器里面，比较简单，只要目标组件的父容器一样就移动，不一样说明出了容器了就不移动
if (nextWidget.parent === widget.parent) {
widgets.splice(index, 1)
widgets.splice(next, 0, widget)
move = true
}
break
// 如果父容器一样并且（目标组件不是容器或者先上移动并且目标组件是容器），则是要移动的位置
} else if (nextWidget.parent === '-1') {
if ((gCount === 0 && nextWidget.isContainer) || !nextWidget.isContainer || (value < 0 && nextWidget.isContainer)) {
if (gCount === 0 && value > 0) {
next -= value
}
widgets.splice(index, 1)
widgets.splice(next, 0, widget)
move = true
break
} else if (nextWidget.isContainer) {
gCount = 0
}
}
next += value
}
next -= value
if (!move && next !== index) {
widgets.splice(index, 1)
widgets.splice(next, 0, widget)
}
// 如果是组合，要把里面的组件添加回去
if (isGroup) {
const pos = widgets.findIndex((item) => item.uuid === uuid)
for (let i = group.length - 1; i >= 0; --i) {
widgets.splice(pos + 1, 0, group[i])
}
}
},
// TODO: 取消组合
ungroup(store, uuid) {
const widgets = store.state.dWidgets
const index = widgets.findIndex((item) => item.uuid === uuid)
widgets.splice(index, 1)
const len = widgets.length
for (let i = 0; i < len; ++i) {
if (widgets[i].parent === uuid) {
widgets[i].parent = '-1'
// store.state.dAltDown = true
// store.dispatch('selectWidgetsInOut', { uuid: widgets[i].uuid })
store.state.dSelectWidgets.push(widgets[i])
}
}
// store.state.dAltDown = false
store.commit('updateSelect')
// store.state.dActiveElement = store.state.dPage
},
/**
* 设置拖拽时在哪个图层
*/
setDropOver(store: any, uuid: string) {
store.state.dDropOverUuid = uuid
},
}

191
src/store/modules/design/index.ts
View File

@ -1,191 +0,0 @@
import mutations from './mutations'
import actions from './actions'
const all = {
state: {
dZoom: 0, // 画布缩放百分比
dPaddingTop: 0, // 画布垂直居中修正值
dScreen: {
width: 0, // 记录编辑界面的宽度
height: 0, // 记录编辑界面的高度
},
// gridSize: {
// width: 0, // 网格小格子的宽度
// height: 0, // 网格小格子的高度
// },
guidelines: {
// moveable 标尺辅助线
verticalGuidelines: [],
horizontalGuidelines: [],
},
dActiveWidgetXY: {
x: 0, // 选中组件的横向初始值
y: 0, // 选中组件的纵向初始值
},
dMouseXY: {
x: 0, // 鼠标按下时的横坐标
y: 0, // 鼠标按下时的纵坐标
},
dMoving: false, // 是否正在移动组件
dDraging: false, // 是否正在抓取组件
dResizeing: false, // 是否正在调整组件宽高
dShowRefLine: true, // 是否显示参考线
dResizeWH: {
// 初始化调整大小时组件的宽高
width: 0,
height: 0,
},
dActiveElement: {}, // 选中的组件或页面
dCopyElement: [], // 复制的组件（可能是单个也可能是数组）
dHoverUuid: '-1', // 鼠标在这个图层上
dDropOverUuid: '', // 拖动时放在哪个图层上
dPage: {
name: '背景页面',
type: 'page',
uuid: '-1',
left: 0,
top: 0,
width: 1920, // 画布宽度
height: 1080, // 画布高度
backgroundColor: '#ffffff', // 画布背景颜色
backgroundImage: '', // 画布背景图片
backgroundTransform: {},
opacity: 1, // 透明度
tag: 0, // 强制刷新用
setting: [
{
label: '背景颜色',
parentKey: 'backgroundColor',
value: false,
},
],
record: {},
},
dWidgets: [], // 已使用的组件
dHistory: [], // 记录历史操作（保存整个画布的json数据）
dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
dPageHistory: [], // 记录历史操作对应的page
dHistoryParams: {
index: -1,
length: 0,
maxLength: 20,
},
dColorHistory: [], // 记录历史选择的颜色
dAltDown: false, // 记录是否按下alt键 / 或ctrl
dSelectWidgets: [], // 记录多选的组件
dGroupJson: {}, // 组合的json数据
selectItem: { data: null }, // 记录当前选择的元素, data
activeMouseEvent: null, // 正在活动的鼠标事件
showMoveable: false, // 全局控制选择框的显示
showRotatable: true, // 是否显示moveable的旋转按钮
zoomScreenChange: null, // 画布强制刷新适应度
updateRect: null, // 强制刷新操作框
updateSelect: null, // 强制设置选择元素
dCropUuid: -1, // 正在编辑or裁剪的组件id
// dDragInitData: {}, // 拖拽初始化数据
},
getters: {
selectItem(state: any) {
return state.selectItem
},
dZoom(state) {
return state.dZoom
},
dPaddingTop(state: any) {
return state.dPaddingTop
},
dScreen(state) {
return state.dScreen
},
// gridSize(state) {
// return state.gridSize
// },
dActiveWidgetXY(state) {
return state.dActiveWidgetXY
},
dMouseXY(state) {
return state.dMouseXY
},
dMoving(state) {
return state.dMoving
},
dDraging(state) {
return state.dDraging
},
dActiveElement(state) {
return state.dActiveElement
},
dPage(state) {
return state.dPage
},
dWidgets(state) {
return state.dWidgets
},
dHistoryParams(state) {
return state.dHistoryParams
},
dColorHistory(state) {
return state.dColorHistory
},
dHoverUuid(state) {
return state.dHoverUuid
},
dResizeing(state) {
return state.dResizeing
},
dShowRefLine(state) {
return state.dShowRefLine
},
dCopyElement(state) {
return state.dCopyElement
},
dAltDown(state) {
return state.dAltDown
},
dSelectWidgets(state) {
return state.dSelectWidgets
},
activeMouseEvent(state: any) {
return state.activeMouseEvent
},
showMoveable(state: any) {
return state.showMoveable
},
showRotatable(state: any) {
return state.showRotatable
},
zoomScreenChange(state: any) {
return state.zoomScreenChange
},
updateRect(state: any) {
return state.updateRect
},
updateSelect(state: any) {
return state.updateSelect
},
dDropOverUuid(state: any) {
return state.dDropOverUuid
},
guidelines(state: any) {
return state.guidelines
},
dCropUuid(state: any) {
return state.dCropUuid
},
dPageHistory(state: any) {
return state.dPageHistory
},
dHistory(state: any) {
return state.dHistory
},
// dDragInitData(state: any) {
// return state.dDragInitData
// },
},
mutations: {
...mutations,
},
actions: {
...actions,
},
}
export default all

88
src/store/modules/design/methods/handleHistory.ts
View File

@ -1,88 +0,0 @@
/*
* @Author: ShawnPhang
* @Date: 2022-03-10 23:05:03
* @Description:
* @LastEditors: ShawnPhang
* @LastEditTime: 2022-03-11 10:13:42
*/
export default function handleHistory(store: any, action: any) {
store.commit('setShowMoveable', false) // 清理掉上一次的选择框
const history = store.state.dHistory
const pageHistory = store.state.dPageHistory
const historyParams = store.state.dHistoryParams
if (action === 'undo') {
historyParams.index -= 1 // 下标向前移1 撤销
console.log(historyParams.index)
if (historyParams.index > -1) {
store.state.dWidgets = JSON.parse(history[historyParams.index])
store.state.dPage = JSON.parse(pageHistory[historyParams.index])
}
} else if (action === 'redo') {
historyParams.index += 1 // 下标向后移1 重做
// 如果下标小于历史记录列表长度，直接取出历史记录
// if (historyParams.index < historyParams.length) {
store.state.dWidgets = JSON.parse(history[historyParams.index])
store.state.dPage = JSON.parse(pageHistory[historyParams.index])
// } else {
// // 否则设置下标为列表最后一项
// historyParams.index = historyParams.length - 1
// store.state.dWidgets = JSON.parse(history[historyParams.index])
// store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
// }
}
}
function handleHistory_old(store: any, action: any) {
store.commit('setShowMoveable', false) // 清理掉上一次的选择框
const history = store.state.dHistory
// const uuidHistory = store.state.dActiveUuidHistory
const pageHistory = store.state.dPageHistory
const historyParams = store.state.dHistoryParams
// let uuid = '-1'
console.log(action, historyParams)
if (action === 'undo') {
// 下标向前移1 撤销
historyParams.index -= 1
// 如果下表大于等于0，直接取出历史记录
if (historyParams.index >= 0) {
console.log(1, history)
console.log(2, pageHistory)
store.state.dWidgets = JSON.parse(history[historyParams.index])
store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
// uuid = uuidHistory[historyParams.index]
} else if (historyParams.length < 10) {
// 否则如果历史记录长度小于10，则设置组件为空
historyParams.index = -1
store.state.dWidgets = []
store.state.dPage = JSON.parse(pageHistory[0])
} else {
historyParams.index = -1
}
} else if (action === 'redo') {
// 下标向后移1 重做
historyParams.index += 1
// 如果下标小于历史记录列表长度，直接取出历史记录
if (historyParams.index < historyParams.length) {
console.log(1, history)
console.log(2, pageHistory)
store.state.dWidgets = JSON.parse(history[historyParams.index])
store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1] || pageHistory[historyParams.index])
// uuid = uuidHistory[historyParams.index]
} else {
// 否则设置下标为列表最后一项
historyParams.index = historyParams.length - 1
store.state.dWidgets = JSON.parse(history[historyParams.index])
store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
// uuid = uuidHistory[historyParams.index]
}
}
// 激活组件默认为page
// let element = store.state.dPage
// if (uuid !== '-1') {
// element = store.state.dWidgets.find((item) => item.uuid === uuid)
// }
// store.state.dActiveElement = element
}

73
src/store/modules/design/methods/pushHistory.ts
View File

@ -1,73 +0,0 @@
/*
* @Author: ShawnPhang
* @Date: 2022-03-04 19:36:00
* @Description:
* @LastEditors: ShawnPhang
* @LastEditTime: 2022-03-11 10:12:50
*/
export default function pushHistory(store: any, msg: string) {
console.log('history压栈', '来源: ' + msg)
const history = store.state.dHistory
const pageHistory = store.state.dPageHistory
const historyParams = store.state.dHistoryParams // index = length - 1
// 如果有上一次记录，并且与新纪录相同，那么不继续操作
if (history[history.length - 1] && history[history.length - 1] === JSON.stringify(store.state.dWidgets)) {
return
}
if (historyParams.index < history.length - 1) {
const index = historyParams.index + 1
const len = history.length - index
history.splice(index, len)
pageHistory.splice(index, len)
historyParams.length = history.length
historyParams.index = history.length - 1
}
history.push(JSON.stringify(store.state.dWidgets))
pageHistory.push(JSON.stringify(store.state.dPage))
historyParams.index = history.length - 1
historyParams.length = history.length
}
function pushHistory_old(store: any) {
// 历史记录列表
const history = store.state.dHistory
// 历史激活组件记录列表
// const uuidHistory = store.state.dActiveUuidHistory
// 历史page记录列表
const pageHistory = store.state.dPageHistory
// 历史记录列表参数（长度和下标）
const historyParams = store.state.dHistoryParams
// 下标不等于-1表示已经存在历史操作记录
// 下标小于历史列表长度-1，则说明不是在末尾添加记录，需要先删除掉下标之后的数据，否则会出现错乱
if (historyParams.index < history.length - 1) {
const index = historyParams.index + 1
const len = history.length - index
// 删除下标之后的所有历史记录
history.splice(index, len)
// 删除下标之后的所有uuid记录
// uuidHistory.splice(index, len)
// 删除下标之后的所有page记录
pageHistory.splice(index + 1, len - 1)
historyParams.length = history.length
}
// 保存当前操作进历史记录
if (history[history.length - 1] !== JSON.stringify(store.state.dWidgets)) {
history.push(JSON.stringify(store.state.dWidgets))
// uuidHistory.push(store.state.dActiveElement.uuid)
pageHistory.push(JSON.stringify(store.state.dPage))
historyParams.index = history.length - 1
historyParams.length = history.length
}
// 历史记录最多n条，如果超过则从头部开始删，因为每次都是一条一条加的，所以只需删一条就行
if (history.length > 20) {
history.splice(0, 1)
// uuidHistory.splice(0, 1)
pageHistory.splice(0, 1)
}
if (pageHistory.length - 1 > history.length) {
pageHistory.splice(0, 1)
}
// historyParams.index = history.length - 1
// historyParams.length = history.length
}

78
src/store/modules/design/mutations.ts
View File

@ -1,78 +0,0 @@
/*
* @Author: ShawnPhang
* @Date: 2021-07-14 15:16:43
* @Description:
* @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-07-11 10:22:54
*/
/**
* 同步操作 store.commit() 调用
*/
interface Iprops {
commit: (a: any, b: any) => void
state: {}
}
export default {
updatePaddingTop(state: Type.Object, num: number) {
state.dPaddingTop = num
},
selectItem(state: Type.Object, { data, type }: any) {
state.selectItem.data = data
state.selectItem.type = type
},
resize(state: Type.Object, data: Type.Object) {
const { width, height } = data
const target = state.dActiveElement
target.width = width
target.height = height
},
setWidgetStyle(state: Type.Object, { uuid, key, value, pushHistory }: Type.Object) {
const widget = state.dWidgets.find((item: any) => item.uuid === uuid)
widget[key] = value
},
setMouseEvent(state: Type.Object, e: Event | null) {
state.activeMouseEvent = e
},
setDWidgets(state: Type.Object, e: any) {
state.dWidgets = e
},
setDPage(state: Type.Object, e: any) {
state.dPage = e
},
setShowMoveable(state: Type.Object, show: any) {
state.showMoveable = show
// if (!show) {
// // TODO: 失焦时设置面板也失去关联，但会导致某些失焦状态出错(如裁剪)
// state.dActiveElement = state.dPage
// }
},
setShowRotatable(state: Type.Object, e: any) {
state.showRotatable = e
},
zoomScreenChange(state: Type.Object, e: any) {
// 画布尺寸适应度强制刷新
state.zoomScreenChange = Math.random()
},
updateRect(state: Type.Object, e: any) {
// 强制刷新操作框
state.updateRect = Math.random()
},
updateSelect(state: Type.Object, e: any) {
// 强制触发元素选择
state.updateSelect = Math.random()
},
updateGuidelines(state: Type.Object, lines: any) {
// 修改标尺线
state.guidelines = { ...state.guidelines, ...lines }
},
setCropUuid(state: Type.Object, uuid: any) {
// 设置正在裁剪or编辑的组件
state.dCropUuid = uuid
},
setDraging(state: Type.Object, drag: boolean) {
state.dDraging = drag
},
// setDragInitData(state: Type.Object, data: any) {
// state.dDragInitData = data
// },
}

9
src/utils/axios.ts
View File

@ -6,8 +6,9 @@
* @LastEditTime: 2024-02-26 17:54:00
*/
import axios, { AxiosRequestConfig, AxiosResponse, AxiosStatic } from 'axios'
import store from '@/store'
// import store from '@/store'
import app_config, { LocalStorageKey } from '@/config'
import { useBaseStore, useUserStore } from '@/store/index';
axios.defaults.timeout = 30000
axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
@ -53,7 +54,8 @@ axios.interceptors.response.use((res: AxiosResponse<any>) => {
}
if (res.data.code === 401) {
console.log('登录失效')
store.commit('changeOnline', false)
useUserStore().changeOnline(false)
// store.commit('changeOnline', false)
}
if (res.data.result && res.data.code === 200) {
@ -67,7 +69,8 @@ axios.interceptors.response.use((res: AxiosResponse<any>) => {
(error) => {
// if (error.response.status === 401) {
// }
store.dispatch('hideLoading')
useBaseStore().hideLoading()
// store.dispatch('hideLoading')
return Promise.reject(error)
},
)

31
src/utils/utils.ts
View File

@ -78,4 +78,35 @@ 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)) {
const value = proxyToObject(proxy[key], seen);
if (value !== '[Circular Reference]') {
obj[key] = value;
}
}
}
}
return obj as P;
};
export default {}

34
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,25 +18,32 @@ 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 { useGroupStore, usePageStore, useWidgetStore } from '@/store'
type TState = {
style: StyleValue
}
const store = useStore()
// const store = useStore()
const route = useRoute()
const state = reactive<TState>({
style: {
left: '0px',
},
})
const { dPage } = useSetupMapGetters(['dPage'])
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()
@ -60,17 +67,23 @@ 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)
// store.commit('setDPage', content.page)
// 移除背景图，作为独立事件
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)
}
}
@ -112,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))

50
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,9 +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, useWidgetStore, useGroupStore } from '@/store'
type TState = {
style: CSSProperties
@ -81,9 +83,17 @@ type TState = {
showLineGuides: boolean
}
const {
dActiveElement, dHistoryParams, dCopyElement, dPage, dZoom
} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dPage', 'dZoom'])
// 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>({
style: {
@ -98,11 +108,12 @@ 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()
const beforeUnload = function (e: Event): any {
if (store.getters.dHistoryParams.length > 0) {
if (dHistoryParams.value.length > 0) {
const confirmationMessage: string = '系统不会自动保存您未修改的内容';
(e || window.event).returnValue = (confirmationMessage as any) // Gecko and Trident
return confirmationMessage // Gecko and WebKit
@ -124,7 +135,7 @@ defineExpose({
const undoable = computed(() => {
return !(
dHistoryParams.value.index === -1 ||
(dHistoryParams.value === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
(dHistoryParams.value.index === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
})
const redoable = computed(() => {
@ -151,26 +162,28 @@ 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)
document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
document.addEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instanceFn, dealCtrl), false)
document.addEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
loadData()
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', fixTopBarScroll)
// window.removeEventListener('click', this.clickListener)
document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
document.removeEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instanceFn, dealCtrl), false)
document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
document.oncontextmenu = null
})
// ...mapActions(['selectWidget', 'initGroupJson', 'handleHistory']),
function handleHistory(data: string) {
store.dispatch('handleHistory', data)
function handleHistory(data: "undo" | "redo") {
historyStore.handleHistory(data)
// store.dispatch('handleHistory', data)
}
function changeLineGuides() {
@ -190,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' })
})
}

48
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,8 +71,10 @@ 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, useWidgetStore } from '@/store'
import { storeToRefs } from 'pinia'
type TState = {
isDone: boolean
@ -90,10 +92,17 @@ const state = reactive<TState>({
downloadMsg: '',
cancelText: '',
})
const store = useStore()
// const store = useStore()
const widgetStore = useWidgetStore()
const controlStore = useControlStore()
const route = useRoute()
const { dPage, dZoom } = useSetupMapGetters(['dPage', 'dZoom'])
// const { dZoom } = useSetupMapGetters(['dZoom'])
const pageStore = usePageStore()
const { dPage } = storeToRefs(pageStore)
const { dZoom } = storeToRefs(useCanvasStore())
const zoomControlRef = ref<typeof zoomControl | null>()
let loading: ReturnType<typeof useLoading> | null = null
@ -134,19 +143,29 @@ 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
store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
pageStore.setDPage(Object.assign(pageStore.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
// store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
await loadDone()
}, 10)
}
async function clear() {
store.commit('setDWidgets', [])
store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
store.commit('setShowMoveable', false)
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: '' }))
// store.commit('setShowMoveable', false)
controlStore.setShowMoveable(false)
await nextTick()
state.isDone = false
}
@ -171,15 +190,15 @@ let checkCtrl: number | undefined
onMounted(() => {
const instance = getCurrentInstance()
document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
document.addEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instance, dealCtrl), false)
document.addEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
loadJS()
})
onBeforeMount(() => {
const instance = getCurrentInstance()
document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
document.removeEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instance, dealCtrl), false)
document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
document.oncontextmenu = null
})
// ...mapActions(['selectWidget']),
@ -189,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',
// })

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

@ -12,7 +12,8 @@
<span style="color: #999; font-size: 14px; margin-right: 0.5rem">{{ state.stateBollean ? '启用' : '停用' }}</span> <el-switch v-model="state.stateBollean" @change="stateChange" />
<div class="divide__line">|</div>
<el-button plain type="primary" @click="saveTemp">保存模板</el-button>
<el-button @click="$store.commit('managerEdit', false)">取消</el-button>
<el-button @click="userStore.managerEdit(false)">取消</el-button>
<!-- <el-button @click="$store.commit('managerEdit', false)">取消</el-button> -->
<div class="divide__line">|</div>
</template>
<!-- <el-button @click="draw">绘制(测试)</el-button> -->
@ -28,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'
@ -38,7 +39,9 @@ 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 { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useBaseStore, useControlStore, useHistoryStore, usePageStore, useUserStore, useWidgetStore } from '@/store/index'
import { storeToRefs } from 'pinia'
type TProps = {
modelValue?: boolean
@ -59,11 +62,25 @@ 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 {
dPage, dWidgets, tempEditing, dHistory, dPageHistory
} = useSetupMapGetters(['dPage', 'dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
// 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())
const state = reactive<TState>({
stateBollean: false,
@ -77,7 +94,10 @@ async function save(hasCover: boolean = false) {
if (dHistory.value.length <= 0) {
return
}
store.commit('setShowMoveable', false) // 清理掉上一次的选择框
// store.commit('setShowMoveable', false) // 清理掉上一次的选择框
controlStore.setShowMoveable(false) // 清理掉上一次的选择框
// console.log(proxy?.dPage, proxy?.dWidgets)
const { id, tempid } = route.query
const cover = hasCover ? await draw() : undefined
@ -85,7 +105,9 @@ async function save(hasCover: boolean = false) {
const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id: (id as string), title: state.title || '未命名设计', data: JSON.stringify({ page: dPage.value, widgets }), temp_id: (tempid as string), width: dPage.value.width, height: dPage.value.height })
stat !== 0 ? useNotification('保存成功', '可在"我的作品"中查看') : useNotification('保存失败', msg, { type: 'error' })
!id && router.push({ path: '/home', query: { id: newId }, replace: true })
store.commit('setShowMoveable', true)
// store.commit('setShowMoveable', true)
controlStore.setShowMoveable(true)
}
// 保存模板
@ -96,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)
@ -180,20 +203,26 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
const data = JSON.parse(content)
state.stateBollean = !!_state
state.title = title
store.commit('setShowMoveable', false) // 清理掉上一次的选择框
// store.commit('setShowMoveable', false) // 清理掉上一次的选择框
controlStore.setShowMoveable(false)
// this.$store.commit('setDWidgets', [])
if (type == 1) {
// 加载文字组合组件
dPage.value.width = width
dPage.value.height = height
store.dispatch('addGroup', data)
widgetStore.addGroup(data)
// store.dispatch('addGroup', data)
// addGroup(data)
} else {
store.commit('setDPage', data.page)
id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
pageStore.setDPage(data.page)
// store.commit('setDPage', data.page)
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')
}
}

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

@ -14,14 +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 { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useControlStore, usePageStore, useWidgetStore } from '@/store'
import { storeToRefs } from 'pinia'
import { TdWidgetData } from '@/store/design/widget'
type TProps = {
modelValue?: string
@ -46,14 +49,19 @@ type TState = {
loading: false,
}
const { dPage, dWidgets } = useSetupMapGetters(['dPage', 'dWidgets'])
// const { dWidgets } = useSetupMapGetters(['dWidgets'])
const { dPage } = storeToRefs(usePageStore())
const props = defineProps<TProps>()
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>({
@ -80,12 +88,14 @@ 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() {
store.commit('setShowMoveable', false) // 清理掉上一次的选择框
// store.commit('setShowMoveable', false) // 清理掉上一次的选择框
controlStore.setShowMoveable(false) // 清理掉上一次的选择框
addition = 0
lenCount = 0
widgets = dWidgets.value
@ -98,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)
}
}
@ -110,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}` })

2267
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff