scale

src/modules/editor/components/Viewport/Content/index.tsx

@@ -46,132 +46,172 @@ export default defineUI({
           actions.onViewReady(
             pageRoot.$el,
             refs.canvas.value,
-            refs.parent.value,
+            refs.parent.value
           );
           helper.initEditLayer(editLayerRef.value);
-          controls.screenCtrl.updateAdapterState()
+          controls.screenCtrl.updateAdapterState();
+          controls.editorCtrl.autoInScreen();
         }, 100);
       }
 
       return (
         <div class="flex flex-1 relative">
-       
-            <div class={["scrollbar", cardList]}>
-                <div>
-                <Container  onDrop={(e: any) => {
-                            if (e.payload) {
-                              actions.addCompToDesign(e.payload, e.addedIndex);
-                            } else {
-                              actions.moveComp(e.removedIndex, e.addedIndex);
-                            }
-                  }} >
-                {
-                  store.streamCardIds.map(item=>{
-                    const c = helper.findComp(item) as DesignComp;
-                    const Comp = controls.compUICtrl.state.components.get(c.compKey)
+          <div class={["scrollbar", cardList]}>
+            <div>
+              <Container
+                onDrop={(e: any) => {
+                  if (e.payload) {
+                    actions.addCompToDesign(e.payload, e.addedIndex);
+                  } else {
+                    actions.moveComp(e.removedIndex, e.addedIndex);
+                  }
+                }}
+              >
+                {store.streamCardIds.map((item) => {
+                  const c = helper.findComp(item) as DesignComp;
+                  const Comp =
+                    controls.compUICtrl.state.components.get(c.compKey)
                       ?.Component || NotFoundComp;
-                  
-                    const r = c.layout.size[1] / c.layout.size[0];
-                    let h = (80 * r);
-                    if (h>80) h = 80;
-                    if (h <40 ) h = 40;
 
-                    const style:any = {height:h+ "px"}
-                    if (store.currStreamCardId == item) {
-                      style.border = "3px solid #EA9E40"
-                    }
-                  return (<Draggable>
-                      <div key={item + controls.screenCtrl.currScreenId} class={["card-item relative transition-opacity hover:opacity-80"]} style={style} onClick={()=>{
-                         actions.selectObjs([]);
-                         actions.pickComp(item, false);
-                         controls.editorCtrl.autoInScreen();
-                      }}>
-                          {
-                              store.streamCardIds.length > 1 && <IconDelete onClick={()=>{
+                  const r = c.layout.size[1] / c.layout.size[0];
+                  let h = 80 * r;
+                  if (h > 80) h = 80;
+                  if (h < 40) h = 40;
+
+                  const style: any = { height: h + "px" };
+                  if (store.currStreamCardId == item) {
+                    style.border = "3px solid #EA9E40";
+                  }
+                  return (
+                    <Draggable>
+                      <div
+                        key={item + controls.screenCtrl.currScreenId}
+                        class={[
+                          "card-item relative transition-opacity hover:opacity-80",
+                        ]}
+                        style={style}
+                        onClick={() => {
+                          actions.selectObjs([]);
+                          actions.pickComp(item, false);
+                          controls.editorCtrl.autoInScreen();
+                        }}
+                      >
+                        {store.streamCardIds.length > 1 && (
+                          <IconDelete
+                            onClick={() => {
                               actions.removeStreamCard(item);
-                            }} class="deleteitem absolute right-4px top-4px text-light-50" />
-                          }
-                          <div class="pointer-events-none">
-                              <Comp compId={c.id} style={{transformOrigin:"0 0", pointerEvent:"none", transform: `scale(${80.0 / helper.designSizeToPx(c.layout.size[0])})`}} />
-                          </div>
+                            }}
+                            class="deleteitem absolute right-4px top-4px text-light-50"
+                          />
+                        )}
+                        <div class="pointer-events-none">
+                          <Comp
+                            compId={c.id}
+                            style={{
+                              transformOrigin: "0 0",
+                              pointerEvent: "none",
+                              transform: `scale(${
+                                80.0 / helper.designSizeToPx(c.layout.size[0])
+                              })`,
+                            }}
+                          />
+                        </div>
                       </div>
-                    </Draggable>)
-                  })
-                }
-                <img class="mt-15px cursor-pointer" onClick={()=>{
-                      const index = store.streamCardIds.length;
-                      actions.addCompToDesign("Container", index);
-                      setTimeout(() => {
-                        controls.editorCtrl.autoInScreen();
-                      }, 200);
-                }} src={require("@/assets/imgs/add.svg")} alt="" />
-                </Container>
-              </div>
+                    </Draggable>
+                  );
+                })}
+                <img
+                  class="mt-15px cursor-pointer"
+                  onClick={() => {
+                    const index = store.streamCardIds.length;
+                    actions.addCompToDesign("Container", index);
+                    setTimeout(() => {
+                      controls.editorCtrl.autoInScreen();
+                    }, 200);
+                  }}
+                  src={require("@/assets/imgs/add.svg")}
+                  alt=""
+                />
+              </Container>
+            </div>
           </div>
-        <div ref={refs.parent} class={["absolute", viewportStyle]}>
-          <div ref={refs.editor}>
-            <div ref={refs.page}  class={"select-none " + contentCls}>
-              <CompUI.Page.Component compId={pageRoot.id}>
-                {{
-                  Container(children: any) {
-                    return (
-                      <>
-                        <Container behaiver="drop-zone"
-                        should-accept-drop={(
-                          sourceContainerOptions: any,
-                          payload: any
-                        ) => {
-                          if (sourceContainerOptions.groupName != "canvas") {
-                            return false;
-                          }
+          <div ref={refs.parent} class={["absolute", viewportStyle]}>
+            <div ref={refs.editor}>
+              <div ref={refs.page} class={"select-none " + contentCls}>
+                <CompUI.Page.Component compId={pageRoot.id}>
+                  {{
+                    Container(children: any) {
+                      return (
+                        <>
+                          <Container
+                            behaiver="drop-zone"
+                            should-accept-drop={(
+                              sourceContainerOptions: any,
+                              payload: any
+                            ) => {
+                              if (
+                                sourceContainerOptions.groupName != "canvas"
+                              ) {
+                                return false;
+                              }
 
-                          console.log("payload===>", "xxx", payload);
-                          
-                          if (typeof payload == "string") {
-                            controls.dragAddCtrl.updateCompKey(payload);
-                          } else {
-                            controls.dragAddCtrl.updateCompKey(payload.type);
-                            controls.dragAddCtrl.updateCompData(payload.data);
-                          }
-                          return false;
-                        }}
+                              console.log("payload===>", "xxx", payload);
 
-                        onDrop={(e: any) => {
-                            debugger;
-                            if (e.payload) {
-                              console.log("xx a")
-                              actions.addCompToDesign(e.payload, e.addedIndex);
-                            } 
-                          }}>
+                              if (typeof payload == "string") {
+                                controls.dragAddCtrl.updateCompKey(payload);
+                              } else {
+                                controls.dragAddCtrl.updateCompKey(
+                                  payload.type
+                                );
+                                controls.dragAddCtrl.updateCompData(
+                                  payload.data
+                                );
+                              }
+                              return false;
+                            }}
+                            onDrop={(e: any) => {
+                              debugger;
+                              if (e.payload) {
+                                console.log("xx a");
+                                actions.addCompToDesign(
+                                  e.payload,
+                                  e.addedIndex
+                                );
+                              }
+                            }}
+                          >
                             {children}
-                        </Container>
-                        {!state.draging && <SelectTransfer />}
-                      </>
-                    );
-                  },
-                  CompItem(comp: DesignComp) {
-                    const Comp =
-                      controls.compUICtrl.state.components.get(comp.compKey)
-                        ?.Component || NotFoundComp;
-                    return (
-                        <Comp compId={comp.id}  key={comp.id + controls.screenCtrl.currScreenId} showMask={true} />
-                    );
-                  },
-                }}
-              </CompUI.Page.Component>
+                          </Container>
+                          {!state.draging && <SelectTransfer />}
+                        </>
+                      );
+                    },
+                    CompItem(comp: DesignComp) {
+                      const Comp =
+                        controls.compUICtrl.state.components.get(comp.compKey)
+                          ?.Component || NotFoundComp;
+                      return (
+                        <Comp
+                          compId={comp.id}
+                          key={comp.id + controls.screenCtrl.currScreenId}
+                          showMask={true}
+                        />
+                      );
+                    },
+                  }}
+                </CompUI.Page.Component>
+              </div>
+              <div class={editLayerStyle} ref={editLayerRef}></div>
             </div>
-            <div class={editLayerStyle} ref={editLayerRef}></div>
-          </div>
-          <canvas class={selectCls} ref={refs.canvas} />
-          
-          {/* <div class={meatureStyle}>    
+            <canvas class={selectCls} ref={refs.canvas} />
+
+            {/* <div class={meatureStyle}>    
             <div class="ruler top" id="rulerTop"></div>
             <div class="ruler left" id="rulerLeft"></div>
             <div class="ruler right" id="rulerRight"></div>
             <div class="ruler bottom" id="rulerBottom"></div> 
           </div> */}
-          
-        </div>
+          </div>
         </div>
       );
     };
@@ -179,7 +219,7 @@ export default defineUI({
 });
 
 const contentCls = css`
-   position: absolute;
+  position: absolute;
   .dndrop-container.vertical > .dndrop-draggable-wrapper {
     overflow: unset;
   }
@@ -287,7 +327,6 @@ const editLayerStyle = css`
 `;
 
 const cardList = css`
-  
   width: 120px;
   height: 100%;
   background: #262626;
@@ -304,7 +343,7 @@ const cardList = css`
     margin-top: 15px;
     width: 80px;
     height: 80px;
-    background: #1F1F1F;
+    background: #1f1f1f;
     border-radius: 4px 4px 4px 4px;
     cursor: pointer;
     overflow: hidden;
@@ -318,16 +357,16 @@ const cardList = css`
     &:hover {
       .deleteitem {
         opacity: 1;
-        background: rgba(0,0,0,0.8);
+        background: rgba(0, 0, 0, 0.8);
       }
     }
   }
 `;
 
-const viewportStyle =  css`
+const viewportStyle = css`
   width: calc(100% - 120px);
   height: 100%;
   left: 120px;
   top: 0px;
   overflow: hidden;
-`
+`;

src/modules/editor/components/Viewport/Toolbar/index.tsx

@@ -80,11 +80,11 @@ export default defineUI({
               />
               <IconReduce
                 class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
-                onClick={() => editorCtrl.setScale(scale - 0.1)}
+                onClick={() => editorCtrl.clickChangeScale(scale - 0.1)}
               />
               <IconPlus
                 class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
-                onClick={() => editorCtrl.setScale(scale + 0.1)}
+                onClick={() => editorCtrl.clickChangeScale(scale + 0.1)}
               />
               <InputNumber
                 min={0.5}
@@ -96,7 +96,7 @@ export default defineUI({
                 formatter={(v: any) => Math.floor(v * 100) + "%"}
                 onPressEnter={(e: any) => {
                   const newScale = e.target.value.split("%")[0] / 100;
-                  editorCtrl.setScale(newScale);
+                  editorCtrl.clickChangeScale(newScale);
                 }}
               />
             </div>

src/modules/editor/controllers/EditorCtrl/index.ts

@@ -1,194 +1,198 @@
-import { Effect, ModuleControl } from "queenjs";
+import { ModuleControl } from "queenjs";
+import { onMounted, ref } from "vue";
 import { EditorModule } from "../../module";
-import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { Matrix } from "../SelectCtrl/matrix";
-import {ref, onMounted, nextTick} from "vue";
 import { RxValue } from "../ReactCtrl/rxValue";
-import { DisplayObject } from "../SelectCtrl/objects/displayObject";
 import { ObjsContainer } from "../SelectCtrl/ObjsContainer";
-import { settingsStore } from "@queenjs-modules/queditor/module/stores/settings";
-import { object } from "vue-types";
-
 
 const KeySpace = 32;
 
 export class EditorCtrl extends ModuleControl<EditorModule> {
-
-    state = RxValue.create({
-        width: 1500,
-        height: 1000,
-        pos: {
-            x: 0, y:0
-        },
-        mouse: {
-            x: 0, y: 0
-        },
-        scale:  1,
-        keyCode: -1,
-        moveMode: false,
-        page: {w: 375, h: 650}
-    })
-
-    doms:any = {};
+  state = RxValue.create({
+    width: 1500,
+    height: 1000,
+    pos: {
+      x: 0,
+      y: 0,
+    },
+    mouse: {
+      x: 0,
+      y: 0,
+    },
+    scale: 1,
+    keyCode: -1,
+    moveMode: false,
+    page: { w: 375, h: 650 },
+  });
+
+  doms: any = {};
 
   useEditor() {
-     const EditorRef = ref<HTMLElement>();
-     const ParentRef = ref<HTMLElement>();
-     const PageRef = ref<HTMLElement>();
-     const CanvasRef = ref<HTMLElement>();
-     let inited = false;
-
-     const init = () => {    
-        if (!EditorRef.value || !CanvasRef.value || !ParentRef.value  || inited) return;
-        
-        clearInterval(refInteral.value) 
-        refInteral.value = null;
-        inited = true;
-    
-        console.log("xxxxxxxx=>" , ParentRef.value, PageRef.value);
-        EditorRef.value.style.width = this.state.width + "px";
-        EditorRef.value.style.height = this.state.height + "px";
-        EditorRef.value.style.position = "absolute";
-        // EditorRef.value.style.backgroundColor = "greenyellow";
-        EditorRef.value.style.left = "0";
-        EditorRef.value.style.top = "0";
-        CanvasRef.value.style.width = "100%"
-        CanvasRef.value.style.height = "100%"
-        EditorRef.value.style.position = "absolute";
-
-        this.initEditorEvent(EditorRef.value, ParentRef.value as any);
-     }
-
-     const refInteral = ref();
-     onMounted(()=>{
-       refInteral.value = setInterval(init, 100);
-     })
-
-     this.doms = {editor:EditorRef, parent: ParentRef, page:PageRef, canvas: CanvasRef};
-     return this.doms;
+    const EditorRef = ref<HTMLElement>();
+    const ParentRef = ref<HTMLElement>();
+    const PageRef = ref<HTMLElement>();
+    const CanvasRef = ref<HTMLElement>();
+    let inited = false;
+
+    const init = () => {
+      if (!EditorRef.value || !CanvasRef.value || !ParentRef.value || inited)
+        return;
+
+      clearInterval(refInteral.value);
+      refInteral.value = null;
+      inited = true;
+
+      console.log("xxxxxxxx=>", ParentRef.value, PageRef.value);
+      EditorRef.value.style.width = this.state.width + "px";
+      EditorRef.value.style.height = this.state.height + "px";
+      EditorRef.value.style.position = "absolute";
+      // EditorRef.value.style.backgroundColor = "greenyellow";
+      EditorRef.value.style.left = "0";
+      EditorRef.value.style.top = "0";
+      CanvasRef.value.style.width = "100%";
+      CanvasRef.value.style.height = "100%";
+      EditorRef.value.style.position = "absolute";
+
+      this.initEditorEvent(EditorRef.value, ParentRef.value as any);
+    };
+
+    const refInteral = ref();
+    onMounted(() => {
+      refInteral.value = setInterval(init, 100);
+    });
+
+    this.doms = {
+      editor: EditorRef,
+      parent: ParentRef,
+      page: PageRef,
+      canvas: CanvasRef,
+    };
+    return this.doms;
   }
-  
-  isKeyDown( key:number) {
+
+  isKeyDown(key: number) {
     return this.state.keyCode === key;
   }
   isMoving() {
     return this.isKeyDown(KeySpace) || this.state.moveMode;
   }
 
-  moveEditor(){
-    if(!this.doms.parent?.value) return;
-    this.doms.parent.value.style.cursor = this.state.moveMode ? "default" : "grab";
+  moveEditor() {
+    if (!this.doms.parent?.value) return;
+    this.doms.parent.value.style.cursor = this.state.moveMode
+      ? "default"
+      : "grab";
     this.state.setMoveMode(!this.state.moveMode);
   }
 
   editRoot = new ObjsContainer([]);
-  initEditorEvent(editorLayer:HTMLElement, parent:HTMLElement) {
+  initEditorEvent(editorLayer: HTMLElement, parent: HTMLElement) {
     // 监听键盘的 keydown 事件
-    document.addEventListener("keydown", (event)=>{
-        this.state.keyCode = event.keyCode;
-        if (this.isKeyDown(KeySpace)) {
-            parent.style.cursor = "grab";
-        }
+    document.addEventListener("keydown", (event) => {
+      this.state.keyCode = event.keyCode;
+      if (this.isKeyDown(KeySpace)) {
+        parent.style.cursor = "grab";
+      }
     });
 
     // 监听键盘的 keyup 事件
-    document.addEventListener("keyup", (event)=>{
-        this.state.keyCode = -1;
-        isMoving = false;
-        if(!this.isMoving()){
-            parent.style.cursor = "default";
-        }
+    document.addEventListener("keyup", (event) => {
+      this.state.keyCode = -1;
+      isMoving = false;
+      if (!this.isMoving()) {
+        parent.style.cursor = "default";
+      }
     });
-    
 
-    parent.addEventListener("wheel", (event:any)=>{
-        // 检查滚轮方向
-        let delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)))
-        console.log( delta );
+    parent.addEventListener("wheel", (event: any) => {
+      // 检查滚轮方向
+      let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail));
+      console.log(delta);
 
-        let s = this.state.scale +  0.1 * delta
-        if ( s < 0.5 ) s = 0.5;
-        if (s > 2) s = 2.0;
-        this.state.setScale( s)
+      let s = this.state.scale + 0.1 * delta;
+      if (s < 0.5) s = 0.5;
+      if (s > 2) s = 2.0;
+      this.state.setScale(s);
     });
 
     let isMoving = false;
-    let moveX = 0, moveY = 0;
+    let moveX = 0,
+      moveY = 0;
 
-    
     const obj = this.editRoot;
-    this.state.onWidthChanged(()=>{
-        obj.rect.width = this.state.width;
-    })
-    this.state.onWidthChanged(()=>{
-        obj.rect.height = this.state.height;
-    })
-
-    parent.addEventListener("mousemove",(e:MouseEvent)=>{
-
-        const s = this.state.scale;
-        const b = editorLayer.getBoundingClientRect()
-        this.state.setMouse({x: (e.clientX - b.left) / s , y: (e.clientY - b.top) / s});
-
-        if (isMoving || e.button == 2) { //鼠标右键
-            e.preventDefault();
-            parent.style.cursor = "grab";
-            const xOffset = e.pageX - moveX;
-            const yOffset = e.pageY - moveY;
-
-            obj.translate(xOffset, yOffset);
-            editorLayer.style.transform = obj.parent.worldTransform.getMatrixStr();
-            //this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
-        }
-        moveX = e.pageX;
-        moveY = e.pageY;
+    this.state.onWidthChanged(() => {
+      obj.rect.width = this.state.width;
+    });
+    this.state.onWidthChanged(() => {
+      obj.rect.height = this.state.height;
     });
-    
-    parent.addEventListener("mouseup",(e:MouseEvent)=>{
-        if(this.state.moveMode) this.moveEditor();
-    })
-
-    document.addEventListener("mouseup",(e:MouseEvent)=>{
-        if(!this.isMoving()){
-            parent.style.cursor = "default";
-        } else if(isMoving) {
-            parent.style.cursor = "pointer";
-        }
-        isMoving = false;
-    })
-
-    this.state.onScaleChanged((v)=>{
-        obj.setPivot2(this.state.mouse.x, this.state.mouse.y)
-        obj.scale(v, v);
-        editorLayer.style.transformOrigin = `0 0`;
+
+    parent.addEventListener("mousemove", (e: MouseEvent) => {
+      const s = this.state.scale;
+      const b = editorLayer.getBoundingClientRect();
+      this.state.setMouse({
+        x: (e.clientX - b.left) / s,
+        y: (e.clientY - b.top) / s,
+      });
+
+      if (isMoving || e.button == 2) {
+        //鼠标右键
+        e.preventDefault();
+        parent.style.cursor = "grab";
+        const xOffset = e.pageX - moveX;
+        const yOffset = e.pageY - moveY;
+
+        obj.translate(xOffset, yOffset);
         editorLayer.style.transform = obj.parent.worldTransform.getMatrixStr();
-        //editorLayer.style.left
-    })
+        //this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
+      }
+      moveX = e.pageX;
+      moveY = e.pageY;
+    });
 
+    parent.addEventListener("mouseup", (e: MouseEvent) => {
+      if (this.state.moveMode) this.moveEditor();
+    });
 
-    this.state.onPosChanged((v)=>{
-        editorLayer.style.left= v.x + "px";
-        editorLayer.style.top = v.y + "px";
-    })
+    document.addEventListener("mouseup", (e: MouseEvent) => {
+      if (!this.isMoving()) {
+        parent.style.cursor = "default";
+      } else if (isMoving) {
+        parent.style.cursor = "pointer";
+      }
+      isMoving = false;
+    });
 
-    parent.addEventListener("mousedown", (e:MouseEvent)=>{
-        isMoving = this.isMoving() || e.button == 2;
-        if (isMoving) {
-            parent.style.cursor = "grab";
-            e.preventDefault();
-            editorLayer.focus();
-        }
-        moveX = e.pageX;
-        moveY = e.pageY;
-    })
+    this.state.onScaleChanged((v) => {
+      obj.setPivot2(this.state.mouse.x, this.state.mouse.y);
+      obj.scale(v, v);
+      editorLayer.style.transformOrigin = `0 0`;
+      editorLayer.style.transform = obj.parent.worldTransform.getMatrixStr();
+      //editorLayer.style.left
+    });
 
-    window.addEventListener("resize", ()=>this.updateEditorSize());
-    this.state.onPageChanged(()=>this.updateCardSize());
+    this.state.onPosChanged((v) => {
+      editorLayer.style.left = v.x + "px";
+      editorLayer.style.top = v.y + "px";
+    });
+
+    parent.addEventListener("mousedown", (e: MouseEvent) => {
+      isMoving = this.isMoving() || e.button == 2;
+      if (isMoving) {
+        parent.style.cursor = "grab";
+        e.preventDefault();
+        editorLayer.focus();
+      }
+      moveX = e.pageX;
+      moveY = e.pageY;
+    });
+
+    window.addEventListener("resize", () => this.updateEditorSize());
+    this.state.onPageChanged(() => this.updateCardSize());
 
     setTimeout(() => {
-        this.updateEditorSize();
+      this.updateEditorSize();
     }, 1000);
-  } 
+  }
 
   updateCardSize() {
     const page = this.doms.page.value as HTMLElement;
@@ -204,39 +208,59 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
   updateEditorSize() {
     const state = this.state;
     const parent = this.doms.parent.value as HTMLElement;
-    const left = ( parent.clientWidth - state.width) / 2.0;
-    const top =  (parent.clientHeight - state.height) / 2.0;
-    
-    this.state.setPos({x: left, y: top});
-}
+    const left = (parent.clientWidth - state.width) / 2.0;
+    const top = (parent.clientHeight - state.height) / 2.0;
+
+    this.state.setPos({ x: left, y: top });
+  }
 
   autoInScreen() {
-    
-     this.setScale(1);
-     const bound = this.store.currStreamCard.$el.getBoundingClientRect();
-     console.log(bound.width, bound.height);
+    let scale = 1;
+    const parent = this.doms.parent.value as HTMLElement;
+    const parentb = parent.getBoundingClientRect();
 
-     const parent = this.doms.parent.value as HTMLElement;
+    const designW =
+      this.helper.designSizeToPx(this.store.currStreamCard.layout.size[0]) + 80;
+    if (parentb.width < designW) {
+      scale = parentb.width / designW;
+    }
+    this.setScale(scale);
 
-     const parentb = parent.getBoundingClientRect();
+    const bound = this.store.currStreamCard.$el.getBoundingClientRect();
 
-     const left = parentb.left + ( parentb.width - bound.width) / 2.0;   //屏幕坐标位置
-     const top =  parentb.top + ( parentb.height - bound.height) / 2.0;
+    const left = parentb.left + (parentb.width - bound.width) / 2.0; //屏幕坐标位置
+    const top = parentb.top + (parentb.height - bound.height) / 2.0;
 
-     let offsetX = left - bound.left;
-     let offsetY = top -bound.top;
+    let offsetX = left - bound.left;
+    let offsetY = top - bound.top;
 
-     this.editRoot.translate(offsetX, offsetY);
+    this.editRoot.translate(offsetX, offsetY);
 
-    const editor =   this.doms.editor.value  as HTMLElement;
+    const editor = this.doms.editor.value as HTMLElement;
     editor.style.transform = this.editRoot.parent.worldTransform.getMatrixStr();
   }
 
+  clickChangeScale(scale: number) {
+    const parent = this.doms.parent.value as HTMLElement;
+    const parentb = parent.getBoundingClientRect();
+    const left = parentb.left + parentb.width / 2.0; //屏幕坐标位置
+    const top = parentb.top + parentb.height / 2.0;
+    const editor = this.doms.editor.value as HTMLElement;
+    const editorb = editor.getBoundingClientRect();
+
+    const leftE = left - editorb.left;
+    const topE = top - editorb.top;
+    this.state.setMouse({
+      x: leftE / this.state.scale,
+      y: topE / this.state.scale,
+    });
+    this.setScale(scale);
+  }
+
   setScale(scale: number) {
     if (isNaN(scale)) scale = this.state.scale;
     else if (scale < 0.5) scale = 0.5;
     else if (scale > 2) scale = 2.0;
     this.state.setScale(scale);
   }
-
 }