Browse Source

调整编程界面缩放问题

丸子 6 months ago
parent
commit
14f44d4402
2 changed files with 15 additions and 2 deletions
  1. 6 0
      src/views/block/Blockly.vue
  2. 9 2
      src/views/block/Blockly2.vue

+ 6 - 0
src/views/block/Blockly.vue

@@ -284,6 +284,12 @@ function endRecordingStatus() {
 // 查看代码编程界面显示状态
 const handleViewCode = () => {
   showLampPreview.value = false;
+  setTimeout(() => {
+    if (state.workspace) {
+      // 触发Blockly工作区重新渲染和调整大小
+      Blockly.svgResize(state.workspace);
+    }
+  }, 100);
 };
 
 // 创建计算属性处理 JSON 字符串的序列化和反序列化

+ 9 - 2
src/views/block/Blockly2.vue

@@ -2,7 +2,7 @@
   <!-- 智能台灯 -->
   <div  class="desk-lamp-container">
     <!-- 标题框 -->
-    <div class="desk-lamp-title-box">
+    <div  class="desk-lamp-title-box">
       <div v-if="showLampPreview" class="desk-lamp-box-icon" @click="goBack">
         <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
         返回虚拟实验室
@@ -60,7 +60,7 @@
 
 
   <!-- Blockly编程界面 -->
-  <div v-show="!showLampPreview" class="container code-overlay">
+  <div  v-show="!showLampPreview"  class="container code-overlay">
     <!-- 返回智能台灯 -->
     <div class="title-box">
       <div class="box-icon" @click="goLabShow">
@@ -317,6 +317,13 @@ function endRecordingStatus() {
 // 查看代码编程界面显示状态
 const handleViewCode = () => {
   showLampPreview.value = false;
+    // 延迟执行,确保DOM已经更新
+  setTimeout(() => {
+    if (state.workspace) {
+      // 触发Blockly工作区重新渲染和调整大小
+      Blockly.svgResize(state.workspace);
+    }
+  }, 100);
 };
 
 // 创建计算属性处理 JSON 字符串的序列化和反序列化