mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-15 16:02:19 +08:00
Merge: main branch
This commit is contained in:
IchliebedichZhu
commit
503e182172
10
README.md
10
README.md
@ -13,7 +13,7 @@
|
||||
### 特点
|
||||
|
||||
- 丝滑的页面操作体验，丰富的交互细节，基础功能完善
|
||||
- 采用服务端生成图片，能确保多端出图统一性，支持各种 CSS 特性
|
||||
- 采用服务端生成图片，确保多端出图统一性，支持各种 HTML5 特性
|
||||
- 简易 AI 抠图工具，上传图片一键去除背景
|
||||
- 技术栈：Vue3 、Vite5 、Vuex 、ElementPlus，开发体验畅快
|
||||
- 图片生成：Puppeteer、Express
|
||||
@ -54,13 +54,9 @@ npm run dev
|
||||
|
||||
后端需要自己开发，目前本项目演示 Demo 中的后端接口参考：[接口 API 文档](https://xp.palxp.cn/apidoc/index.html)。
|
||||
|
||||
## 其它
|
||||
## 交流群
|
||||
|
||||
我们尝试沉淀一个高质量内容社区，形成可持续学习的平台，同时解决开发者在项目中遇到的疑难和困惑，帮大家少走一些弯路。
|
||||
|
||||
<img style="width: 380px;" src="https://github.com/palxiao/poster-design/assets/21021314/643dcc8b-ef73-4c76-a78c-a7c377b5f268" />
|
||||
|
||||
也欢迎关注公众号：品味前端，回复“加群”进行交流。
|
||||
关注公众号：品味前端，回复 “加群” 获取二维码，更新公告不错过。
|
||||
|
||||
<img style="width: 380px;" src="https://xp.palxp.cn/images/2024-3-1-1709306365949.png" />
|
||||
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
@import './color.less';
|
||||
// design index page
|
||||
|
||||
// Color variables (appears count calculates by raw css)
|
||||
@color4: #50555b; // Appears 2 times
|
||||
@color5: #808080; // Appears 2 times
|
||||
@color4: #50555b;
|
||||
@color5: #808080;
|
||||
|
||||
// Width variables (appears count calculates by raw css)
|
||||
@width0: 1180px; // Appears 3 times
|
||||
@width1: 120px; // Appears 2 times
|
||||
@width2: 100%; // Appears 8 times
|
||||
@width0: 1180px;
|
||||
@width1: 120px;
|
||||
@width2: 100%;
|
||||
|
||||
@height2: 54px; // Appears 5 times
|
||||
@height2: 54px;
|
||||
|
||||
.page-design-bg-color {
|
||||
// background-color: #4b678c;
|
||||
|
||||
@ -9,41 +9,32 @@
|
||||
<div id="empty" class="moveable__remove-item zk-moveable-style"></div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Events, defineComponent, nextTick, onMounted, watch } from 'vue'
|
||||
import { defineComponent, nextTick, onMounted, watch } from 'vue'
|
||||
|
||||
import Moveable, { EVENTS, OnRotate, WithEventStop } from 'moveable' // PROPERTIES, METHODS,
|
||||
import Moveable, { EVENTS } from 'moveable' // PROPERTIES, METHODS,
|
||||
import MoveableHelper from 'moveable-helper'
|
||||
import { mapGetters, mapActions, useStore } from 'vuex'
|
||||
// import { setTransformAttribute } from '@/common/methods/handleTransform'
|
||||
import useSelecto from './Selecto'
|
||||
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useCanvasStore, useControlStore } from '@/pinia'
|
||||
|
||||
const {
|
||||
dSelectWidgets, dActiveElement, activeMouseEvent,
|
||||
dWidgets,
|
||||
updateRect, updateSelect,
|
||||
} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'dWidgets', 'updateRect', 'updateSelect'])
|
||||
const store = useStore()
|
||||
const controlStore = useControlStore()
|
||||
const { guidelines } = storeToRefs(useCanvasStore())
|
||||
const { showMoveable, showRotatable } = storeToRefs(controlStore)
|
||||
// computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines'])
|
||||
// computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines']),
|
||||
const {
|
||||
dSelectWidgets, dActiveElement, activeMouseEvent, showMoveable, showRotatable, dWidgets, updateRect, updateSelect, guidelines
|
||||
} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines'])
|
||||
|
||||
let _target: string = ""
|
||||
let moveable: Moveable | null = null
|
||||
let holdPosition: { left: number, top: number } | null = null
|
||||
let _target: string | null = null
|
||||
|
||||
|
||||
let startHL: number = 0
|
||||
let startLS: number = 0
|
||||
let resetRatio: number = 0
|
||||
let resizeTempData: { width: number, height: number } | null = null
|
||||
|
||||
watch(
|
||||
() => dActiveElement.value,
|
||||
async (val) => {
|
||||
setTimeout(async () => {
|
||||
await nextTick()
|
||||
checkMouseEvent()
|
||||
}, 10);
|
||||
if (!val.record) {
|
||||
return
|
||||
}
|
||||
@ -73,19 +64,13 @@ watch(
|
||||
// // Set Move Auto
|
||||
moveable.setState({ target: _target }, () => {
|
||||
// 当出现mouseevent时进行即刻选中
|
||||
if (activeMouseEvent.value) {
|
||||
moveable?.dragStart(activeMouseEvent.value)
|
||||
// TODO 使用后销毁mouseevent
|
||||
store.commit('setMouseEvent', null)
|
||||
}
|
||||
checkMouseEvent()
|
||||
})
|
||||
// // End
|
||||
// controlStore.setShowMoveable(true)
|
||||
controlStore.setShowMoveable(true)
|
||||
|
||||
store.commit('setShowMoveable', true)
|
||||
// 参考线设置
|
||||
if (!moveable.elementGuidelines?.includes(target)) {
|
||||
moveable.elementGuidelines?.push(target)
|
||||
if (moveable.elementGuidelines && !moveable.elementGuidelines.includes(target)) {
|
||||
moveable.elementGuidelines.push(target)
|
||||
}
|
||||
} else {
|
||||
moveable.target = `[id="empty"]`
|
||||
@ -96,16 +81,14 @@ watch(
|
||||
}, 210)
|
||||
}
|
||||
// feature: 可以遍历来设置参考线，目前先粗暴清空
|
||||
if (moveable.elementGuidelines) {
|
||||
moveable.elementGuidelines.length = 0
|
||||
}
|
||||
moveable.elementGuidelines && (moveable.elementGuidelines.length = 0)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => showMoveable.value,
|
||||
val => {
|
||||
(val) => {
|
||||
if (!moveable) return
|
||||
if (val) {
|
||||
moveable.target = _target
|
||||
@ -117,22 +100,23 @@ watch(
|
||||
|
||||
watch(
|
||||
() => showRotatable.value,
|
||||
val => {
|
||||
// TODO: 这里是通过旋转来判断是否可以操作
|
||||
(val) => {
|
||||
if (!moveable) return
|
||||
|
||||
// TODO: 这里是通过旋转来判断是否可以操作
|
||||
moveable.renderDirections = val ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : []
|
||||
moveable.resizable = val
|
||||
moveable.scalable = val
|
||||
const el = document.getElementsByClassName('moveable-rotation')[0] as HTMLElement
|
||||
el.style.display = val ? 'block' : 'none'
|
||||
// this.moveable.scalable = val
|
||||
const el = document.getElementsByClassName('moveable-rotation')
|
||||
if (el && el[0]) {
|
||||
(el[0] as HTMLElement).style.display = val ? 'block' : 'none'
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => updateRect.value,
|
||||
() => {
|
||||
moveable?.updateRect()
|
||||
moveable && moveable.updateRect()
|
||||
}
|
||||
)
|
||||
|
||||
@ -146,7 +130,6 @@ watch(
|
||||
await nextTick()
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
console.log(items[i].uuid)
|
||||
|
||||
document.getElementById(items[i].uuid)?.classList.add('widget-selected')
|
||||
}
|
||||
moveable.renderDirections = []
|
||||
@ -199,9 +182,57 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
type TMoveableOptions = {
|
||||
target: HTMLElement | null
|
||||
container?: HTMLElement | null
|
||||
zoom: number
|
||||
draggable: boolean
|
||||
clippable: boolean // 裁剪
|
||||
throttleDrag: number
|
||||
resizable: boolean
|
||||
throttleResize: number
|
||||
scalable: boolean
|
||||
throttleScale: number
|
||||
keepRatio: boolean
|
||||
rotatable: boolean
|
||||
throttleRotate: number
|
||||
renderDirections: string[] // ['nw', 'ne', 'sw', 'se'] // 'e'
|
||||
pinchable: boolean // ["draggable", "resizable", "scalable", "rotatable"]
|
||||
origin: boolean
|
||||
defaultGroupOrigin: string,
|
||||
/* 样式相关 */
|
||||
rotationPosition: 'bottom',
|
||||
className: 'zk-moveable-style',
|
||||
/* -- 吸附对齐 Start -- */
|
||||
snappable: boolean,
|
||||
elementGuidelines: [],
|
||||
verticalGuidelines: [],
|
||||
horizontalGuidelines: [],
|
||||
snapThreshold: 4,
|
||||
isDisplaySnapDigit: boolean,
|
||||
snapGap: boolean,
|
||||
snapElement: boolean,
|
||||
snapVertical: boolean,
|
||||
snapHorizontal: boolean,
|
||||
snapCenter: boolean,
|
||||
snapDigit: number
|
||||
|
||||
// snapDirections={{"top":true,"right":true,"bottom":true,"left":true}}
|
||||
// elementSnapDirections={{}}
|
||||
// -- END --
|
||||
triggerAblesSimultaneously: true,
|
||||
}
|
||||
|
||||
let moveable: Moveable | null = null
|
||||
let holdPosition: { left: number, top: number } | null = null
|
||||
let startHL: number = 0
|
||||
let startLS: number = 0
|
||||
let resetRatio: number = 0
|
||||
let resizeTempData: { width: number, height: number } | null = null
|
||||
|
||||
onMounted(() => {
|
||||
let holdGroupPosition: Record<string, any> | null = null
|
||||
const moveableOptions: any = {
|
||||
const moveableOptions: TMoveableOptions = {
|
||||
target: document.querySelector(`[id="empty"]`),
|
||||
// container: document.querySelector('#page-design'),
|
||||
zoom: 0.8,
|
||||
@ -241,22 +272,25 @@ onMounted(() => {
|
||||
// -- END --
|
||||
triggerAblesSimultaneously: true,
|
||||
}
|
||||
const moveableInstance = new Moveable(document.body, moveableOptions)
|
||||
moveable = moveableInstance
|
||||
|
||||
const helper: any = new MoveableHelper()
|
||||
moveable = new Moveable(document.body, moveableOptions)
|
||||
|
||||
const helper = new MoveableHelper()
|
||||
|
||||
EVENTS.forEach((event) => {
|
||||
let helperEvent = event.replace(event[0], 'on' + event[0].toUpperCase())
|
||||
let helperEvent = (event.replace(event[0], 'on' + event[0].toUpperCase()) as keyof MoveableHelper)
|
||||
// console.log(event)
|
||||
// 'resizeStart', 'resize', 'resizeEnd', rotate, onScale, onScaleStart
|
||||
if (['resizeStart', 'rotate', 'resize'].includes(event)) {
|
||||
moveable?.on(event as any, (...args) => {
|
||||
// this.$emit(event, ...args)
|
||||
helper[helperEvent] && helper[helperEvent](...args)
|
||||
if (helper[helperEvent] && typeof helper[helperEvent] === "function") {
|
||||
(helper[helperEvent] as Function)(...args)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
/* draggable */
|
||||
let resizeStartWidth = 0
|
||||
|
||||
@ -281,44 +315,32 @@ onMounted(() => {
|
||||
inputEvent.preventDefault()
|
||||
// console.log(this.holdPosition, inputEvent.pageX, inputEvent.pageY)
|
||||
if (holdPosition) {
|
||||
store.dispatch('updateWidgetData', {
|
||||
store.dispatch("updateWidgetData", {
|
||||
uuid: dActiveElement.value.uuid,
|
||||
key: 'left',
|
||||
value: Number(holdPosition?.left),
|
||||
})
|
||||
// this.updateWidgetData({
|
||||
// uuid: this.dActiveElement.uuid,
|
||||
// key: 'left',
|
||||
// value: Number(this.holdPosition?.left),
|
||||
// })
|
||||
store.dispatch('updateWidgetData', {
|
||||
store.dispatch("updateWidgetData", {
|
||||
uuid: dActiveElement.value.uuid,
|
||||
key: 'top',
|
||||
value: Number(holdPosition?.top),
|
||||
})
|
||||
// this.updateWidgetData({
|
||||
// uuid: this.dActiveElement.uuid,
|
||||
// key: 'top',
|
||||
// value: Number(this.holdPosition?.top),
|
||||
// })
|
||||
holdPosition = null // important
|
||||
setTimeout(() => {
|
||||
store.dispatch('pushHistory')
|
||||
// this.pushHistory()
|
||||
store.dispatch("pushHistory")
|
||||
// pushHistory()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
// .on('keyUp', (e) => {
|
||||
// moveable.updateRect()
|
||||
// })
|
||||
// { target, beforeDist, dist, transform }
|
||||
.on('rotate', ({ target, beforeDist, dist, transform }) => {
|
||||
.on('rotate', ({ target, beforeDist, dist, transform }: any) => {
|
||||
// console.log('onRotate', Number(this.dActiveElement.rotate) + Number(beforeDist + dist))
|
||||
// target.style.transform = transform
|
||||
|
||||
console.log(target.style.transform)
|
||||
})
|
||||
.on('rotateEnd', (e) => {
|
||||
.on('rotateEnd', (e: any) => {
|
||||
const tf = e.target.style.transform
|
||||
const iof = tf.indexOf('rotate')
|
||||
let rotate = ''
|
||||
@ -333,15 +355,11 @@ onMounted(() => {
|
||||
key: 'rotate',
|
||||
value: rotate,
|
||||
})
|
||||
// this.updateWidgetData({
|
||||
// uuid: this.dActiveElement.uuid,
|
||||
// key: 'rotate',
|
||||
// value: rotate,
|
||||
// })
|
||||
})
|
||||
.on('resizeStart', (args) => {
|
||||
console.log(args.target.style.transform)
|
||||
if (!moveable) return
|
||||
|
||||
moveable.snappable = false
|
||||
if (dActiveElement.value.type === 'w-text') {
|
||||
if (String(args.direction) === '1,0') {
|
||||
@ -427,19 +445,6 @@ onMounted(() => {
|
||||
},
|
||||
],
|
||||
})
|
||||
// this.updateWidgetMultiple({
|
||||
// uuid: this.dActiveElement.uuid,
|
||||
// data: [
|
||||
// {
|
||||
// key: 'left',
|
||||
// value: Number(this.dActiveElement.left) + left,
|
||||
// },
|
||||
// {
|
||||
// key: 'top',
|
||||
// value: Number(this.dActiveElement.top) + top,
|
||||
// },
|
||||
// ],
|
||||
// })
|
||||
// 重置translate
|
||||
const tf = e.target.style.transform
|
||||
const iof = tf.indexOf('translate')
|
||||
@ -453,12 +458,13 @@ onMounted(() => {
|
||||
if (resizeTempData) {
|
||||
store.commit('resize', resizeTempData)
|
||||
resizeTempData = null
|
||||
setTimeout(async () => {
|
||||
await nextTick()
|
||||
if (moveable) {
|
||||
// await this.$nextTick()
|
||||
moveable.updateRect()
|
||||
}
|
||||
}, 10)
|
||||
// 临时处理缩放后细线问题 https://github.com/palxiao/poster-design/issues/75
|
||||
store.commit('setShowMoveable', false)
|
||||
setTimeout(() => {
|
||||
store.commit('setShowMoveable', true)
|
||||
}, 10);
|
||||
}
|
||||
try {
|
||||
if (dActiveElement.value.type === 'w-text') {
|
||||
@ -486,7 +492,7 @@ onMounted(() => {
|
||||
target!.style.transform = transform
|
||||
dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('0deg', dActiveElement.value.rotate))
|
||||
})
|
||||
.on('scaleEnd', (e: Record<string, any>) => {
|
||||
.on('scaleEnd', (e: any) => {
|
||||
if (!moveable) return
|
||||
moveable.resizable = true
|
||||
// moveable.scalable = true
|
||||
@ -523,7 +529,7 @@ onMounted(() => {
|
||||
for (const key in holdGroupPosition) {
|
||||
if (Object.prototype.hasOwnProperty.call(holdGroupPosition, key)) {
|
||||
const item = holdGroupPosition[key]
|
||||
store.dispatch('updateWidgetData', {
|
||||
store.dispatch("updateWidgetData", {
|
||||
uuid: key,
|
||||
key: 'left',
|
||||
value: item.left,
|
||||
@ -539,7 +545,7 @@ onMounted(() => {
|
||||
// background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
|
||||
// background-size: 12px 1px;
|
||||
})
|
||||
.on('resizeGroupStart', ({ events }) => {
|
||||
.on('resizeGroupStart', ({ events }: any) => {
|
||||
console.log(events)
|
||||
// events.forEach((ev, i) => {
|
||||
// const frame = this.frames[i];
|
||||
@ -556,7 +562,7 @@ onMounted(() => {
|
||||
// ev.dragStart && ev.dragStart.set(frame.translate);
|
||||
// });
|
||||
})
|
||||
.on('resizeGroup', (e) => {
|
||||
.on('resizeGroup', (e: any) => {
|
||||
// events.forEach(({ target, width, height, drag }, i) => {
|
||||
// const frame = this.frames[i];
|
||||
// target.style.width = `${width}px`;
|
||||
@ -567,28 +573,36 @@ onMounted(() => {
|
||||
// = `translate(${drag.beforeTranslate[0]}px, ${drag.beforeTranslate[1]}px)`;
|
||||
// });
|
||||
})
|
||||
.on('resizeGroupEnd', ({ targets, isDrag }) => {
|
||||
.on('resizeGroupEnd', ({ targets, isDrag }: any) => {
|
||||
console.log('onResizeGroupEnd', targets, isDrag)
|
||||
})
|
||||
|
||||
// -- 选择功能 Start --
|
||||
useSelecto(moveable)
|
||||
// -- 选择功能 END --
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
async function created() {
|
||||
await nextTick()
|
||||
const Ele = document.getElementById('page-design')
|
||||
const Ele = document.getElementById('main')
|
||||
// 后续可能加个节流 TODO
|
||||
Ele?.addEventListener('scroll', () => {
|
||||
moveable && (moveable.updateRect())
|
||||
if (!moveable) return
|
||||
moveable.updateRect()
|
||||
})
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
// ...mapActions(['updateWidgetData', 'updateWidgetMultiple', 'pushHistory']),
|
||||
|
||||
function checkMouseEvent() {
|
||||
if (activeMouseEvent.value && moveable) {
|
||||
moveable.dragStart(activeMouseEvent.value)
|
||||
// 使用后销毁mouseevent
|
||||
store.commit('setMouseEvent', null)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
@ -10,12 +10,12 @@
|
||||
<el-tabs tab-position="left" style="height: 60vh" class="demo-tabs" @tab-change="tabChange">
|
||||
<el-tab-pane label="我的素材">
|
||||
<div class="pic__box">
|
||||
<photo-list :isDone="state.isDone" :listData="state.imgList" @load="load" @select="selectImg" />
|
||||
<photo-list :canDrag="false" :isDone="state.isDone" :listData="state.imgList" @load="load" @select="selectImg" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="照片图库">
|
||||
<div class="pic__box">
|
||||
<photo-list :isDone="state.isPicsDone" :listData="state.recommendImgList" @load="loadPic" @select="selectImg($event, state.recommendImgList)" />
|
||||
<photo-list :canDrag="false" :isDone="state.isPicsDone" :listData="state.recommendImgList" @load="loadPic" @select="selectImg($event, state.recommendImgList)" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -240,7 +240,6 @@ async function drop(e: MouseEvent) {
|
||||
|
||||
} else {
|
||||
store.dispatch('addWidget', setting) // 正常加入面板
|
||||
// addWidget(setting) // 正常加入面板
|
||||
}
|
||||
}
|
||||
} else if (type === 'bg') {
|
||||
@ -248,7 +247,6 @@ async function drop(e: MouseEvent) {
|
||||
} else if (type !== 'group') {
|
||||
console.log(setting)
|
||||
store.dispatch('addWidget', setting) // 正常加入面板
|
||||
// addWidget(setting) // 正常加入面板
|
||||
}
|
||||
// 清除临时数据
|
||||
// this.$store.commit('selectItem', {})
|
||||
|
||||
@ -268,7 +268,9 @@ async function autoFixTop() {
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
screenChange
|
||||
screenChange,
|
||||
add,
|
||||
sub
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -276,7 +278,7 @@ defineExpose({
|
||||
<style lang="less" scoped>
|
||||
@color-select: #1b1634;
|
||||
@color1: #ffffff; // 选项板背景
|
||||
@color2: #ffffff; // Appears 3 times
|
||||
@color2: #ffffff;
|
||||
@color3: #666666; // 文字主颜色
|
||||
@color4: #c2c2c2; // 禁用
|
||||
@color5: rgba(0, 0, 0, 0.12); // 高亮选项背景
|
||||
|
||||
@ -157,9 +157,9 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@color0: #ffffff; // Appears 5 times
|
||||
@color1: #999999; // Appears 3 times
|
||||
@color2: rgba(0, 0, 0, 0.05); // Appears 2 times
|
||||
@color0: #ffffff;
|
||||
@color1: #999999;
|
||||
@color2: rgba(0, 0, 0, 0.05);
|
||||
|
||||
.widget-list {
|
||||
width: 100%;
|
||||
|
||||
@ -59,29 +59,13 @@ watch(
|
||||
},
|
||||
)
|
||||
|
||||
// const { proxy } = getCurrentInstance() as ComponentInternalInstance
|
||||
// watch(
|
||||
// () => state.active,
|
||||
// () => {
|
||||
// let screen = document.getElementById('page-design')
|
||||
// nextTick(() => {
|
||||
// proxy?.updateScreen({
|
||||
// width: screen.offsetWidth,
|
||||
// height: screen.offsetHeight,
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
// )
|
||||
|
||||
defineExpose({
|
||||
clickClassify
|
||||
})
|
||||
// ...mapActions(['updateScreen']),
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// Color variables (appears count calculates by raw css)
|
||||
@color1: #3e4651; // Appears 2 times
|
||||
@color1: #3e4651;
|
||||
|
||||
#widget-panel {
|
||||
transition: all 1s;
|
||||
|
||||
@ -10,13 +10,12 @@
|
||||
<div class="list">
|
||||
<div
|
||||
v-for="(item, i) in state.list" :key="i + 'i'"
|
||||
:style="{ width: item.listWidth + 'px', marginRight: item.gap + 'px' }"
|
||||
:style="{ width: item.listWidth + 'px', marginRight: item.gap + 'px', cursor: canDrag ? 'grab' : 'pointer' }"
|
||||
class="list__img" draggable="false"
|
||||
@mousedown="dragStart($event, i)"
|
||||
@mousemove="mousemove"
|
||||
@mouseup="mouseup"
|
||||
@click.stop="select(i)"
|
||||
@dragstart="dragStart($event, i)"
|
||||
>
|
||||
<edit-model v-if="props.edit" :options="props.edit" :data="{ item, i }">
|
||||
<div v-if="item.isDelect" class="list__mask">已删除</div>
|
||||
@ -49,13 +48,13 @@ type TProps = {
|
||||
edit?: Record<string, any>
|
||||
isDone?: boolean
|
||||
isShort?: boolean
|
||||
canDrag?: boolean
|
||||
}
|
||||
|
||||
type TEmits = {
|
||||
(event: 'load'): void
|
||||
(event: 'select', data: number): void
|
||||
(event: 'drag', data: number): void
|
||||
|
||||
}
|
||||
|
||||
type TState = {
|
||||
@ -65,6 +64,7 @@ type TState = {
|
||||
|
||||
const props = withDefaults(defineProps<TProps>(), {
|
||||
isShort: false,
|
||||
canDrag: true,
|
||||
listData: () => ([])
|
||||
})
|
||||
const emit = defineEmits<TEmits>()
|
||||
@ -176,6 +176,9 @@ const select = (i: number) => {
|
||||
|
||||
const dragStart = async (e: Event | any, i: number) => {
|
||||
e.preventDefault()
|
||||
if (!props.canDrag) {
|
||||
return
|
||||
}
|
||||
startPoint = { x: e.x, y: e.y }
|
||||
if (!state.list[i].isDelect) {
|
||||
const setImageParams: TItem2DataParam = {
|
||||
@ -242,7 +245,6 @@ defineExpose({
|
||||
&__img {
|
||||
// background: #f1f2f4;
|
||||
display: inline-block;
|
||||
cursor: grab;
|
||||
// margin: 0 6px 2px 0;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 2px;
|
||||
|
||||
@ -173,8 +173,8 @@ function blurInput() {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@color0: #e1e1e1; // Appears 2 times
|
||||
@color1: #d1d1d1; // Appears 2 times
|
||||
@color0: #e1e1e1;
|
||||
@color1: #d1d1d1;
|
||||
|
||||
.number-input {
|
||||
height: 60px;
|
||||
|
||||
@ -133,6 +133,7 @@ function updateRecord(tempScale ?: number) {
|
||||
// TODO DOM Change
|
||||
// this.dActiveElement.scale = this.ratio
|
||||
if (widget.value) {
|
||||
// 缩放原点在左上角，旋转原点在中心
|
||||
widget.value.style.transformOrigin = 'left top' // 设置scale的原点
|
||||
setTransformAttribute(widget.value, 'scale', ratio.value)
|
||||
}
|
||||
@ -180,7 +181,7 @@ function touchend() {
|
||||
setTimeout(() => {
|
||||
if (!widget.value) return
|
||||
widget.value.style.opacity = `${props.params.opacity}`
|
||||
// this.$refs.widget.style.transformOrigin = 'center' // 设置scale的原点
|
||||
// widget.value.style.transformOrigin = 'center' // 设置scale的原点
|
||||
}, 100)
|
||||
|
||||
// const opacity = this.$refs.widget.style.opacity
|
||||
|
||||
@ -308,8 +308,11 @@ function openCropper() {
|
||||
// }
|
||||
|
||||
|
||||
function selectDone(img: TGetImageListResult) {
|
||||
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
|
||||
// this.imgCrop(true)
|
||||
}
|
||||
|
||||
|
||||
@ -78,11 +78,11 @@ export default () => {
|
||||
setting.text = await navigator.clipboard.readText()
|
||||
store.dispatch('addWidget', setting)
|
||||
break
|
||||
}
|
||||
} else resolve()
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
// 剪贴板内容为空
|
||||
// 剪贴板内容为空, 直接返回
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
@ -6,11 +6,8 @@
|
||||
* @LastEditTime: 2023-09-19 17:29:06
|
||||
*/
|
||||
import store from '@/store'
|
||||
const _this: any = {}
|
||||
_this.dHistoryParams = store.getters.dHistoryParams
|
||||
// _this.dActiveElement = store.getters.dActiveElement
|
||||
// _this.dPage = store.getters.dPage
|
||||
// _this.handleHistory = store.dispatch.ha
|
||||
// const _this: any = {}
|
||||
// _this.dHistoryParams = store.getters.dHistoryParams
|
||||
|
||||
import keyCodeOptions from './methods/keyCodeOptions'
|
||||
import dealWithCtrl from './methods/dealWithCtrl'
|
||||
|
||||
@ -281,10 +281,8 @@ export default {
|
||||
} else {
|
||||
copyElement[i].parent = '-1'
|
||||
}
|
||||
if (!container) {
|
||||
copyElement[i].top += 50
|
||||
copyElement[i].left += 50
|
||||
}
|
||||
copyElement[i].top += 30
|
||||
copyElement[i].left += 30
|
||||
}
|
||||
store.state.dWidgets = store.state.dWidgets.concat(copyElement)
|
||||
store.state.dActiveElement = copyElement[0]
|
||||
|
||||
@ -28,7 +28,6 @@ type TState = {
|
||||
style: StyleValue
|
||||
}
|
||||
|
||||
// mixins: [shortcuts],
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const state = reactive<TState>({
|
||||
@ -48,8 +47,8 @@ onMounted(() => {
|
||||
})
|
||||
})
|
||||
|
||||
// ...mapActions(['initGroupJson', 'setTemplate', 'addGroup']),
|
||||
async function load() {
|
||||
let backgroundImage = ''
|
||||
let loadFlag = false
|
||||
const { id, tempid, tempType: type } = route.query
|
||||
if (id || tempid) {
|
||||
@ -70,6 +69,10 @@ async function load() {
|
||||
} else {
|
||||
pageStore.setDPage(content.page)
|
||||
// store.commit('setDPage', content.page)
|
||||
// 移除背景图，作为独立事件
|
||||
backgroundImage = content.page?.backgroundImage
|
||||
backgroundImage && delete content.page.backgroundImage
|
||||
store.commit('setDPage', content.page)
|
||||
if (id) {
|
||||
store.commit('setDWidgets', widgets)
|
||||
} else {
|
||||
@ -111,10 +114,11 @@ async function load() {
|
||||
}
|
||||
} catch (e) {}
|
||||
})
|
||||
// TODO优化: 背景图无法检测是否加载完毕，考虑应该将设置背景作为独立事件
|
||||
if (content.page?.backgroundImage) {
|
||||
const preloadBg = new Preload([content.page.backgroundImage])
|
||||
// 背景图无法检测是否加载完毕，所以单独做判断
|
||||
if (backgroundImage) {
|
||||
const preloadBg = new Preload([backgroundImage])
|
||||
await preloadBg.imgs()
|
||||
store.commit('setDPage', {...content.page, ...{backgroundImage}})
|
||||
}
|
||||
try {
|
||||
fontWithDraw && (await font2style(fontContent, fontData))
|
||||
|
||||
@ -57,7 +57,6 @@ import _config from '../config'
|
||||
import {
|
||||
CSSProperties, computed, nextTick,
|
||||
onBeforeUnmount, onMounted, reactive, ref,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
|
||||
@ -65,7 +64,6 @@ import Moveable from '@/components/business/moveable/Moveable.vue'
|
||||
import designBoard from '@/components/modules/layout/designBoard/index.vue'
|
||||
import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
|
||||
import lineGuides from '@/components/modules/layout/lineGuides.vue'
|
||||
|
||||
import shortcuts from '@/mixins/shortcuts'
|
||||
// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
|
||||
import HeaderOptions from './components/HeaderOptions.vue'
|
||||
@ -85,16 +83,6 @@ type TState = {
|
||||
showLineGuides: boolean
|
||||
}
|
||||
|
||||
const beforeUnload = function (e: Event): string {
|
||||
const confirmationMessage: string = '系统不会自动保存您未修改的内容';
|
||||
|
||||
(e || window.event).returnValue = (confirmationMessage as any) // Gecko and Trident
|
||||
return confirmationMessage // Gecko and WebKit
|
||||
}
|
||||
|
||||
// mixins: [shortcuts],
|
||||
!_config.isDev && window.addEventListener('beforeunload', beforeUnload)
|
||||
|
||||
const {
|
||||
dActiveElement, dHistoryParams, dCopyElement
|
||||
} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement'])
|
||||
@ -118,9 +106,15 @@ const zoomControlRef = ref<typeof zoomControl | null>(null)
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
|
||||
// const draw = () => {
|
||||
// state.openDraw = true
|
||||
// }
|
||||
const beforeUnload = function (e: Event): any {
|
||||
if (store.getters.dHistoryParams.length > 0) {
|
||||
const confirmationMessage: string = '系统不会自动保存您未修改的内容';
|
||||
(e || window.event).returnValue = (confirmationMessage as any) // Gecko and Trident
|
||||
return confirmationMessage // Gecko and WebKit
|
||||
} else return false
|
||||
}
|
||||
|
||||
!_config.isDev && window.addEventListener('beforeunload', beforeUnload)
|
||||
|
||||
function jump2home() {
|
||||
// const fullPath = window.location.href.split('/')
|
||||
@ -141,32 +135,40 @@ const undoable = computed(() => {
|
||||
const redoable = computed(() => {
|
||||
return !(dHistoryParams.value.index === dHistoryParams.value.length - 1)
|
||||
})
|
||||
// watch: {
|
||||
// $route() {
|
||||
// console.log('change route', this.$route.query)
|
||||
// this.loadData()
|
||||
// },
|
||||
// },
|
||||
|
||||
function zoomSub() {
|
||||
if (!zoomControlRef.value) return
|
||||
zoomControlRef.value.sub()
|
||||
}
|
||||
|
||||
function zoomAdd() {
|
||||
if (!zoomControlRef.value) return
|
||||
zoomControlRef.value.add()
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (!optionsRef.value) return
|
||||
optionsRef.value.save()
|
||||
}
|
||||
|
||||
const { handleKeydowm, handleKeyup, dealCtrl } = shortcuts.methods
|
||||
let checkCtrl: number | undefined
|
||||
const instanceFn = { save, zoomAdd, zoomSub }
|
||||
|
||||
onMounted(() => {
|
||||
store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
|
||||
// initGroupJson(JSON.stringify(wGroup.setting))
|
||||
window.addEventListener('scroll', fixTopBarScroll)
|
||||
// window.addEventListener('click', this.clickListener)
|
||||
const instance = getCurrentInstance()
|
||||
document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
|
||||
document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
|
||||
document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
|
||||
loadData()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('scroll', fixTopBarScroll)
|
||||
const instance = getCurrentInstance()
|
||||
// window.removeEventListener('click', this.clickListener)
|
||||
document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
|
||||
document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
|
||||
document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
|
||||
document.oncontextmenu = null
|
||||
})
|
||||
@ -201,29 +203,14 @@ function loadData() {
|
||||
})
|
||||
}
|
||||
|
||||
function zoomSub() {
|
||||
if (!zoomControlRef.value) return
|
||||
zoomControlRef.value.sub()
|
||||
}
|
||||
|
||||
function zoomAdd() {
|
||||
if (!zoomControlRef.value) return
|
||||
zoomControlRef.value.add()
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (!optionsRef.value) return
|
||||
optionsRef.value.save()
|
||||
}
|
||||
|
||||
function fixTopBarScroll() {
|
||||
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
|
||||
state.style.left = `-${scrollLeft}px`
|
||||
}
|
||||
|
||||
function clickListener(e: Event) {
|
||||
console.log('click listener', e)
|
||||
}
|
||||
// function clickListener(e: Event) {
|
||||
// console.log('click listener', e)
|
||||
// }
|
||||
|
||||
function optionsChange({ downloadPercent, downloadText }: { downloadPercent: number, downloadText: string }) {
|
||||
state.downloadPercent = downloadPercent
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user