Skip to content

fix: 修复画布宽度设置问题 #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chilingling merged 8 commits into from
Dec 19, 2023
Merged

fix: 修复画布宽度设置问题 #128

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3a8fb71
fix: 修复画布宽度设置问题
gene9831 Dec 6, 2023
4a23da3
fix: 优化画布设置中输入框的值的校验规则
gene9831 Dec 8, 2023
6846a5e
fix: 画布设置中宽度输入框的值设置为空时重置为上一个有效值
gene9831 Dec 8, 2023
47571dc
fix: 降低函数圈复杂度
gene9831 Dec 11, 2023
40f2f68
fix: 回退预览页相关代码
gene9831 Dec 13, 2023
1afde5b
Merge branch 'develop' of github.com:opentiny/tiny-engine into fix/ca…
gene9831 Dec 15, 2023
b5e8ade
fix: 增强匹配缩放值的正则表达式
gene9831 Dec 15, 2023
67f711d
fix: 代码优化
gene9831 Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 37 additions & 46 deletions packages/toolbars/media/src/Main.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,9 +287,6 @@ export default {
minWidth: item.minWidth,
maxWidth: item.maxWidth
})
state.width = parseInt(item.width, 10)
state.scaleValue = scale.value.toFixed(2)
state.readonly = item.view !== 'mdx'
} else {
state.activeIndex = item.idx
emit('setViewPort', item.width)
Expand All @@ -298,54 +295,43 @@ export default {

const activeView = (val, type) => {
const item = mediaMap[type]
state.activeIndex = mediaMap[type].index
useLayout().setDimension({
deviceType: item.view,
width: val ? `${val}px` : item.width,
minWidth: item.minWidth,
maxWidth: item.maxWidth
})
}

const breakpoints = [
{ type: 'mobile', min: 240, max: 480 },
{ type: 'lanMobile', min: 480, max: 768 },
{ type: 'tablet', min: 768, max: 992 },
{ type: 'desktop', min: 992, max: 1200 },
{ type: 'mdx', min: 1200, max: 1920 }
]

const widthChange = (val) => {
const reg = '^[0-9]*$'
const dimension = useLayout().getDimension()
const reg = /^\d+$/

if (!String(val).match(reg)) {
state.width = prevWidthVal ? prevWidthVal : parseInt(dimension.width)
} else if (String(val) === '0' || Number(val) < 240) {
state.width = prevWidthVal ? prevWidthVal : parseInt(dimension.value.width, 10)
} else if (Number(val) < 240) {
state.width = 240
prevWidthVal = 240
} else if (Number(val) > 1920) {
state.width = 1920
prevWidthVal = 1920
} else {
prevWidthVal = val
state.width = val
}

switch (true) {
case 1200 < Number(state.width) && Number(state.width) <= 1920:
activeView(val, 'mdx')
break
case 992 < Number(state.width) && Number(state.width) <= 1200:
activeView(val, 'desktop')
break
case 768 < Number(state.width) && Number(state.width) <= 992:
activeView(val, 'tablet')
break
case 480 < Number(state.width) && Number(state.width) <= 768:
activeView(val, 'lanMobile')
break
case 240 <= Number(state.width) && Number(state.width) <= 480:
activeView(val, 'mobile')
break
default:
break
}
const width = Number(state.width)
const type = breakpoints.find((item) => item.min <= width && width <= item.max)?.type || 'desktop'
activeView(width, type)
}

const scaleChange = (val) => {
const item = mediaMap['mdx']
const reg = '^[0-9]*$'
const reg = /^\d+(\.\d+)?$/

if (!String(val).match(reg)) {
state.scaleValue = prevScaleVal ? prevScaleVal : parseInt(item.scale)
Expand All @@ -354,14 +340,11 @@ export default {
} else if (Number(val) < 20) {
state.scaleValue = 20
} else {
prevScaleVal = val
state.scaleValue = val
}
state.scaleValue = Number(state.scaleValue).toFixed(2)

useLayout().setDimension({
deviceType: item.view,
width: item.width,
minWidth: item.minWidth,
maxWidth: item.maxWidth,
scale: Number(state.scaleValue) / 100
})
}
Expand All @@ -370,22 +353,26 @@ export default {
setCanvasType(value ? 'absolute' : 'normal')
}

watchEffect(
() => {
const mode = dimension.value.deviceType || 'desktop'

state.activeIndex = mediaMap[mode].index || 0
setViewPort(mediaMap[mode])
},
{ flush: 'post' }
watch(
() => dimension.value.deviceType,
(deviceType) => {
state.activeIndex = mediaMap[deviceType].index
state.readonly = deviceType !== 'mdx'
}
)

watchEffect(() => {
state.scaleValue = scale.value.toFixed(2)
prevScaleVal = scale.value
})

watch(
() => useLayout().getDimension().width,
() => dimension.value.width,
(width) => {
const newWidth = parseInt(width, 10)
if (Number.isInteger(newWidth) && newWidth !== state.width) {
if (Number.isInteger(newWidth)) {
state.width = newWidth
prevWidthVal = newWidth
}
}
)
Expand All @@ -398,6 +385,10 @@ export default {
document.removeEventListener('click', closePopover)
})

// 初始化 viewpoint
const mode = dimension.value.deviceType || 'desktop'
setViewPort(mediaMap[mode])

return {
scale,
state,
Expand Down