Skip to content
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.

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

fix:插件面板固定后画布未自适应 #234

Merged
merged 9 commits into from
Jan 10, 2024
41 changes: 22 additions & 19 deletions packages/canvas/src/components/container/CanvasResize.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,6 @@ export default {
const mouseDown = ref(false)
const resizeDom = ref(null)

const onMouseMove = (event) => {
if (mouseDown.value) {
event.preventDefault()
calculateSize(event)
}
}

const calculateSize = ({ movementX }) => {
const dimension = useLayout().getDimension()
const { maxWidth, minWidth, width } = dimension
Expand All @@ -48,13 +41,10 @@ export default {
})
}

const onMouseDown = () => {
const iframe = canvasState.iframe

if (iframe) {
iframe.style['pointer-events'] = 'none'
bindEvents()
mouseDown.value = true
const onMouseMove = (event) => {
if (mouseDown.value) {
event.preventDefault()
calculateSize(event)
}
}

Expand All @@ -64,7 +54,9 @@ export default {
if (iframe) {
iframe.style['pointer-events'] = 'auto'
mouseDown.value = false
unbindEvents()

document.removeEventListener('mousemove', onMouseMove, { passive: false })
document.removeEventListener('mouseup', onMouseUp)
}
}

Expand All @@ -73,9 +65,14 @@ export default {
document.addEventListener('mouseup', onMouseUp)
}

const unbindEvents = () => {
document.removeEventListener('mousemove', onMouseMove, { passive: false })
document.removeEventListener('mouseup', onMouseUp)
const onMouseDown = () => {
const iframe = canvasState.iframe

if (iframe) {
iframe.style['pointer-events'] = 'none'
bindEvents()
mouseDown.value = true
}
}

const setScale = () => {
Expand All @@ -95,7 +92,13 @@ export default {

watch(
() => useLayout().getPluginState().render,
(value) => !value && setScale(),
(value) => {
const currentFixed = useLayout().getPluginState().fixedPanels.includes(value)

if (!value || currentFixed) {
setScale()
}
},
{ flush: 'post' }
)

Expand Down
Loading