fix: adjust canvas scaling after panel drag (#1268)

packages/canvas/container/src/components/CanvasResize.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 <script>
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useLayout, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { canvasState } from '../container'
 
@@ -90,6 +90,9 @@ export default {
       })
     }
 
+    const draggablePanel = ref(null)
+    watch(() => useLayout().getPluginWidth(draggablePanel.value), setScale, { flush: 'post' })
+
     watch(() => useLayout().getDimension().width, setScale, { flush: 'post', immediate: true })
 
     watch(() => useLayout().leftFixedPanelsStorage.value, setScale, { flush: 'post' })
@@ -98,6 +101,11 @@ export default {
       () => useLayout().getPluginState().render,
       (value) => {
         const currentFixed = useLayout().getPluginState().fixedPanels.includes(value)
+        const isPanelResizable = useLayout().isPanelWidthResizable(value)
+
+        if (isPanelResizable) {
+          draggablePanel.value = value
+        }
 
         if (!value || currentFixed) {
           setScale()
@@ -129,6 +137,18 @@ export default {
       }
     )
 
+    const handleResize = () => {
+      setScale()
+    }
+
+    onMounted(() => {
+      window.addEventListener('resize', handleResize)
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', handleResize)
+    })
+
     return {
       onMouseDown,
       onMouseMove,