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

* fix: 修复数据源mock数据不一致 * fix：插件面板固定后画布未自适应 * fix：插件面板固定后画布未自适应 * fix：修复eslint报错
opentiny · Jan 10, 2024 · 9b96d10 · 9b96d10
1 parent 2b5fe01
commit 9b96d10
Showing 1 changed file with 22 additions and 19 deletions.
diff --git a/packages/canvas/src/components/container/CanvasResize.vue b/packages/canvas/src/components/container/CanvasResize.vue
@@ -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
@@ -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)
       }
     }
 
@@ -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)
       }
     }
 
@@ -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 = () => {
@@ -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' }
     )