update

Author: chaoxiaoshu-mx

src/core/mixins/visual.js

@@ -20,6 +20,7 @@ Vue.mixin({
         setCanvasStyle(canvasRef, parentRef, space = 0) {
             this.$nextTick(() => {
                 let canvas = this.$refs[canvasRef];
+                const parent = this.$refs[parentRef];
                 console.log("====setCanvasStyle", JSON.stringify(this.canvasStyle))
                 if (this.canvasStyle.intWidth) {
                     canvas.style.setProperty("--w", this.canvasStyle.intWidth + "px");
@@ -28,6 +29,7 @@ Vue.mixin({
                     canvas.style.setProperty("--h", this.canvasStyle.intHeight + "px");
                 }
                 if (this.canvasStyle.backgroundColor) {
+                    parent.style.setProperty("--color", this.canvasStyle.backgroundColor);
                     canvas.style.setProperty("--color", this.canvasStyle.backgroundColor);
                 }
                 this.defaultScale = this.getScale(parentRef, space);
@@ -40,28 +42,18 @@ Vue.mixin({
             if (cpt.style.height) cpt.point.h = cpt.style.height;
             return cpt.style;
         },
-        setZoom(step) {
-            if (this.defaultScale >= 1.5 && step > 0) return;
-            if (this.defaultScale <= 0.5 && step < 0) return;
-            this.defaultScale += step;
-            console.log("====setZoom", step)
-            let droppable = document.getElementById("droppable")
-            droppable.style.transform = "scale(" + this.defaultScale + ")";
-        },
         getScale(refName, space) {
             const parent = this.$refs[refName];
             // 画布父容器宽度
             const parentW = parent.offsetWidth;
             // 画布父容器高度
             const parentH = parent.offsetHeight;
             console.log("====parent", parent.offsetWidth, parent.offsetHeight)
-            let scaleX = (parentW + space) / this.canvasStyle.intWidth;
-            let scaleY = (parentH + space)  / this.canvasStyle.intHeight;
-            if (space > 0) {
-                return Math.max(scaleX, scaleY);
-            } else {
-                return Math.min(scaleX, scaleY);
-            }
+            console.log("====window", window.innerWidth, window.innerHeight)
+            let scaleX = (parentW - space) / this.canvasStyle.intWidth;
+            let scaleY = (parentH - space)  / this.canvasStyle.intHeight;
+
+            return Math.min(scaleX, scaleY);
         },
         handleUnselect(cptId) {
             const unselect = (cptId) => {

src/view/pages/visual/display/index.vue

@@ -101,40 +101,12 @@ export default {
               this.canvasStyle[key] = jsonObj.canvasStyle[key];
             }
           }
-          this.setCanvasStyle("canvasDisplay", "canvasContainer", 40);
+          this.setCanvasStyle("canvasDisplay", "canvasContainer");
           this.refresh(this.fullData);
         }
       })
   },
   methods: {
-    /**
-     * 获取自适应的scale
-     * @param fullData
-     * @returns {number}
-     */
-    // getScale(fullData) {
-    //   let left = null, right = null, top = null, bottom = null;
-    //   fullData.forEach(item => {
-    //     let point = item.point;
-    //     if (!left || left > point.x) left = point.x;
-    //     if (!right || right < (point.x + point.w)) right = point.x + point.w;
-    //     if (!top || top > point.y) top = point.y;
-    //     if (!bottom || bottom < (point.y + point.h)) bottom = point.y + point.h;
-    //   })
-    //   // 宽 = 最右 - 最左
-    //   let fitW = right - left;
-    //   // 高 = 最下 - 最上
-    //   let fitH = bottom - top;
-    //   let canvasDisplay = document.getElementById("canvas_display");
-    //   canvasDisplay.style.width = fitW + "px";
-    //   canvasDisplay.style.height = fitH + "px";
-    //
-    //   const w = window.innerWidth / fitW
-    //   const h = window.innerHeight / fitH
-    //   // 宽度与高度的比例取最小的，以确保屏幕可以完全显示
-    //   let scale = Math.min(w, h)
-    //   return scale;
-    // },
     /**
      * 放大
      */
@@ -149,14 +121,6 @@ export default {
       this.scale -= 0.1;
       this.setZoom(this.scale);
     },
-    // /**
-    //  * 缩放
-    //  * @param scale
-    //  */
-    // setZoom(scale) {
-    //   let canvasDisplay = document.getElementById("canvas_display")
-    //   canvasDisplay.style.transform = "scale(" + scale + ")";
-    // },
     getChartStyle(item) {
       return {
         borderRadius: "10px",
@@ -220,14 +184,16 @@ export default {
 <style scoped lang="scss">
 .canvas-container {
   position: relative;
-  width: 100%;
+  width: 100%!important;
   height: 100%!important;
   padding: 0;
   margin: 0;
+  background-color: var(--color);
   .canvas-display {
-    width: 100%;
-    height: 100%;
+    width: var(--w);
+    height: var(--h);
     background-color: var(--color);
+    transform-origin: 0 0;
   }
   .draggable-class {
     position: absolute;

src/view/pages/visual/editor/canvas/index.vue

@@ -138,7 +138,7 @@ export default {
             this.canvasStyle[key] = newValue.canvasStyle[key];
           }
         }
-        this.setCanvasStyle("droppable", "canvas_container");
+        this.setCanvasStyle("droppable", "canvas_container", 40);
         // 默认显示页面设置面板
         bus.$emit("share", {type: "background", ...this.canvasStyle})
       },
@@ -162,7 +162,7 @@ export default {
       });
 
       window.addEventListener("resize", () => {
-        this.setCanvasStyle("droppable", "canvas_container");
+        this.setCanvasStyle("droppable", "canvas_container", 40);
 
       }, null);
       // 默认显示页面设置面板
@@ -189,7 +189,7 @@ export default {
         if (style.intHeight) this.canvasStyle.intHeight = style.intHeight
         if (style.backgroundColor) this.canvasStyle.backgroundColor = style.backgroundColor;
         console.log("====changeStyle", style)
-        this.setCanvasStyle("droppable", "canvas_container");
+        this.setCanvasStyle("droppable", "canvas_container", 40);
       } else {
         // 组件设置
         let index = this.fullData.findIndex(item => item.cptId == cptId)