mirrors/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design synced 2024-11-21 15:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: scrollbar & lineGuides

Browse Source
This commit is contained in:
ShawnPhang 2024-03-26 11:09:12 +08:00
parent abb2a034b5
commit 6fa5d35364
16 changed files with 122 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,6 +2,7 @@
node_modules
/dist
config.json
/.vite
screenshot/node_modules/
screenshot/dist/

15
src/assets/styles/main.less
View File

@ -26,9 +26,14 @@ body {
border-style: solid;
border-color: #e5e7eb;
// font-size: 14px;
scrollbar-width: none; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
// scrollbar-width: none; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
-ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
}
@-moz-document url-prefix() {
* {
scrollbar-width: none;
}
}
// html ::-webkit-scrollbar {
// display: none; /* Chrome Safari */
// }
@ -40,12 +45,13 @@ body {
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #ccd4de;
background-color: #d9dcdf;
cursor: pointer;
// box-shadow: 0 0 1px hsl(0deg 0% 100% / 50%);
}
&::-webkit-scrollbar-track {
background-color: #f0f1f3;
// background-color: transparent;
// background-color: #f0f1f3;
background-color: transparent;
// border-radius: 3px;
}
@ -129,6 +135,7 @@ p {
position: fixed;
z-index: 99999;
pointer-events: none;
opacity: .9;
}
.hide {
opacity: 0 !important;

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

@ -364,10 +364,13 @@ export default defineComponent({
if (this.resizeTempData) {
this.$store.commit('resize', this.resizeTempData)
this.resizeTempData = null
setTimeout(async () => {
await this.$nextTick()
this.moveable.updateRect()
}, 10)
// await this.$nextTick()
this.moveable.updateRect()
// 临时处理缩放后细线问题
this.$store.commit('setShowMoveable', false)
setTimeout(() => {
this.$store.commit('setShowMoveable', true)
}, 10);
}
try {
if (this.dActiveElement.type === 'w-text') {

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

@ -1,61 +1,61 @@
<template>
<div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px' }">
<!-- <el-scrollbar> -->
<div
id="out-page"
class="out-page"
:style="{
width: (dPage.width * dZoom) / 100 + 120 + 'px',
height: (dPage.height * dZoom) / 100 + 120 + 'px',
opacity: 1 - (dZoom < 100 ? dPage.tag : 0),
}"
>
<slot />
<div id="main">
<div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px', minWidth: (dPage.width * dZoom) / 100 + 120 + 'px' }" >
<div
:id="pageDesignCanvasId"
class="design-canvas"
:data-type="dPage.type"
:data-uuid="dPage.uuid"
id="out-page"
class="out-page"
:style="{
width: dPage.width + 'px',
height: dPage.height + 'px',
transform: 'scale(' + dZoom / 100 + ')',
transformOrigin: (dZoom >= 100 ? 'center' : 'left') + ' top',
backgroundColor: dPage.backgroundColor,
backgroundImage: `url(${dPage?.backgroundImage})`,
backgroundSize: dPage?.backgroundTransform?.x ? 'auto' : 'cover',
backgroundPositionX: (dPage?.backgroundTransform?.x || 0) + 'px',
backgroundPositionY: (dPage?.backgroundTransform?.y || 0) + 'px',
opacity: dPage.opacity + (dZoom < 100 ? dPage.tag : 0),
width: (dPage.width * dZoom) / 100 + 120 + 'px',
height: (dPage.height * dZoom) / 100 + 120 + 'px',
opacity: 1 - (dZoom < 100 ? dPage.tag : 0),
}"
@mousemove="dropOver($event)"
@drop="drop($event)"
@mouseup="drop($event)"
>
<!-- <grid-size /> -->
<slot />
<div
:id="pageDesignCanvasId"
class="design-canvas"
:data-type="dPage.type"
:data-uuid="dPage.uuid"
:style="{
width: dPage.width + 'px',
height: dPage.height + 'px',
transform: 'scale(' + dZoom / 100 + ')',
transformOrigin: (dZoom >= 100 ? 'center' : 'left') + ' top',
backgroundColor: dPage.backgroundColor,
backgroundImage: `url(${dPage?.backgroundImage})`,
backgroundSize: dPage?.backgroundTransform?.x ? 'auto' : 'cover',
backgroundPositionX: (dPage?.backgroundTransform?.x || 0) + 'px',
backgroundPositionY: (dPage?.backgroundTransform?.y || 0) + 'px',
opacity: dPage.opacity + (dZoom < 100 ? dPage.tag : 0),
}"
@mousemove="dropOver($event)"
@drop="drop($event)"
@mouseup="drop($event)"
>
<!-- <grid-size /> -->
<!-- :class="{
layer: true,
'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">
<template v-if="layer.isContainer">
<!-- :class="{
layer: true,
'layer-active': getIsActive(widget.uuid),
'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" />
</template>
</component>
<!-- :class="{
layer: true,
'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">
<template v-if="layer.isContainer">
<!-- :class="{
layer: true,
'layer-active': getIsActive(widget.uuid),
'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" />
</template>
</component>
<!-- <ref-line v-if="dSelectWidgets.length === 0" /> -->
<!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
<!-- <ref-line v-if="dSelectWidgets.length === 0" /> -->
<!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
</div>
</div>
</div>
<!-- </el-scrollbar> -->
</div>
</template>
@ -333,13 +333,17 @@ function getChilds(uuid: string) {
</script>
<style lang="less" scoped>
#main {
overflow: auto; position: relative;
}
#page-design {
height: 100%;
scrollbar-width: none;
min-height: 100%;
// display: flex;
// align-items: center;
overflow: auto;
position: relative;
width: 100%;
// width: 100%;
.out-page {
margin: 0 auto;
padding: 60px;

2
src/components/modules/layout/zoomControl/data.ts
View File

@ -34,7 +34,7 @@ export const ZoomList: TZoomData[] = [
value: 200,
},
{
text: '最佳尺寸',
text: '适应屏幕',
value: -1,
// icon: 'icon-best-size',
},

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

@ -248,10 +248,9 @@ async function autoFixTop() {
const presetPadding = 60
const el = document.getElementById('out-page')
if (!el) return
// const clientHeight = document.body.clientHeight - 54
const parentHeight = (el.offsetParent as HTMLElement).offsetHeight - 54
let padding = (parentHeight - el.offsetHeight) / 2
const clientHeight = window.innerHeight - 54
// const parentHeight = (el.offsetParent as HTMLElement).offsetHeight - 54
let padding = (clientHeight - el.offsetHeight) / 2
if (typeof curAction.value === 'undefined') {
padding += presetPadding / 2
}

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

@ -78,23 +78,23 @@ function layerChange(newLayer: Record<string, any>[]) {
</script>
<style lang="less" scoped>
@color0: #ffffff; // Appears 5 times
@color1: #999999; // Appears 3 times
@color2: #d7d7d7; // Appears 2 times
@color0: #ffffff;
@color1: #999999;
@background-color-transparent: rgba(0,0,0,.08);
#style-panel ::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
#style-panel {
background-color: @color0;
border-left: 1px solid @color2;
border-left: 1px solid @background-color-transparent;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
width: 280px;
.style-tab {
box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
text-align: center;

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

@ -257,6 +257,11 @@ defineExpose({
.infinite-list {
height: 100%;
padding-bottom: 150px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.infinite-list::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.list {
width: 100%;

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

@ -209,6 +209,11 @@ export default defineComponent({
.infinite-list {
height: 100%;
padding-bottom: 150px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.infinite-list::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.list {
width: 100%;

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

@ -2,7 +2,7 @@
* @Author: ShawnPhang
* @Date: 2021-08-27 15:16:07
* @Description: 模板列表
* @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @Date: 2024-03-06 21:16:00
-->
<template>
@ -11,7 +11,7 @@
<el-divider v-show="state.title" style="margin-top: 1.7rem" content-position="left">
<span style="font-weight: bold">{{ state.title }}</span>
</el-divider>
<ul ref="listRef" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
<img-water-fall :listData="state.list" @select="selectItem" />
<div v-show="state.loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
@ -192,6 +192,11 @@ defineExpose({
height: 100%;
margin-top: 1rem;
padding-bottom: 150px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.infinite-list::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
// .list {
// width: 100%;

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

@ -11,7 +11,6 @@
}"
draggable="true"
@click="selectBasicText(item)"
@dragstart="dragStart($event, item)"
>
{{ item.text }}
</div>
@ -25,7 +24,7 @@
<script lang="ts" setup>
// const NAME = 'text-list-wrap'
import wText from '../../widgets/wText/wText.vue'
import { wTextSetting } from '../../widgets/wText/wTextSetting'
import { useStore } from 'vuex'
@ -40,7 +39,7 @@ const store = useStore()
const selectBasicText = (item: TBasicTextData) => {
store.commit('setShowMoveable', false) // 清理掉上一次的选择
let setting = JSON.parse(JSON.stringify(wText.setting))
let setting = JSON.parse(JSON.stringify(wTextSetting))
setting.text = '双击编辑文字' // item.text
setting.width = item.fontSize * setting.text.length
setting.fontSize = item.fontSize
@ -49,13 +48,12 @@ const selectBasicText = (item: TBasicTextData) => {
setting.left = pW / 2 - item.fontSize * 3
setting.top = pH / 2 - item.fontSize / 2
store.dispatch('addWidget', setting)
// addWidget(setting)
}
const dragStart = (_: MouseEvent, item: any) => {
store.commit('setDraging', true)
store.commit('selectItem', { data: { value: item }, type: 'text' })
}
// const dragStart = (_: MouseEvent, item: any) => {
// store.commit('setDraging', true)
// store.commit('selectItem', { data: { value: item }, type: 'text' })
// }
const basicTextList: TBasicTextData[] = [
// {
@ -86,7 +84,6 @@ const basicTextList: TBasicTextData[] = [
]
defineExpose({
selectBasicText,
dragStart,
})
// ...mapActions(['addWidget'])
@ -106,7 +103,7 @@ defineExpose({
.basic-text-item {
color: #33383e;
background-color: #f1f2f4;
cursor: grab;
cursor: pointer;
user-select: none;
border-bottom: 1px solid rgba(255, 255, 255, 0);
border-top: 1px solid rgba(255, 255, 255, 0);

7
src/components/modules/panel/wrap/components/classHeader.vue
View File

@ -27,7 +27,7 @@ export type TClassHeaderTypeData = {
}
type TProps = {
types: TClassHeaderTypeData[]
types?: TClassHeaderTypeData[]
isBack?: boolean
}
@ -56,6 +56,11 @@ defineExpose({ select, back })
height: 100%;
overflow: auto;
padding-bottom: 100px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
&__wrap::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
}
.types {

5
src/components/modules/panel/wrap/components/photoList.vue
View File

@ -218,6 +218,11 @@ defineExpose({
.img-list-wrap {
height: 100%;
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.img-list-wrap::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.img {
transform-origin: center;

2
src/config.ts
View File

@ -13,7 +13,7 @@ export default {
// API_URL: isDev ? 'http://localhost:9998' : '${API}',
API_URL: 'https://palxp.cn:8887', // 服务端地址
SCREEN_URL: isDev ? 'http://localhost:7001' : '#{SCREEN_URL}', // 截图服务地址
IMG_URL: 'https://store.palxp.com/', // 七牛云资源地址
IMG_URL: 'https://store.palxp.cn/', // 七牛云资源地址
// ICONFONT_URL: '//at.alicdn.com/t/font_3223711_74mlzj4jdue.css',
ICONFONT_URL: '//at.alicdn.com/t/font_2717063_ypy8vprc3b.css?display=swap',
ICONFONT_EXTRA: '//at.alicdn.com/t/c/font_3228074_42xym3extur.css',

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

@ -337,8 +337,7 @@ export default {
store.state.dSelectWidgets = []
}, 10)
} else {
// TODO: 不清空会引起mask的bug，原因还不清楚..
store.state.dActiveElement = {}
// store.state.dActiveElement = {}
setTimeout(() => {
store.state.dActiveElement = widget
}, 10)

4
src/views/Index.vue
View File

@ -186,8 +186,8 @@ function loadData() {
if (!optionsRef.value) return
optionsRef.value.load(id, tempid, tempType, async () => {
if (!zoomControlRef.value) return
zoomControlRef.value.screenChange()
await nextTick()
// await nextTick()
// zoomControlRef.value.screenChange()
// 初始化激活的控件为page
store.dispatch('selectWidget', { uuid: '-1' })
// selectWidget({