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

import { Effect, ModuleControl } from "queenjs";
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";


const KeySpace = 32;

export class EditorCtrl extends ModuleControl<EditorModule> {

    parent: HTMLElement | undefined = undefined;


    state = RxValue.create({
        width: 1500,
        height: 1000,
        pos: {
            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>();
     const init = () => {
        if (!EditorRef.value || !CanvasRef.value || !ParentRef.value) return;
        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);
     }

     onMounted(()=>{
        setTimeout(init, 200);
     })

     this.doms = {editor:EditorRef, parent: ParentRef, page:PageRef, canvas: CanvasRef};
     return this.doms;
  }
  
  isKeyDown( key:number) {
    return this.state.keyCode === key;
  }
  isMoving() {
    return this.isKeyDown(KeySpace) || this.state.moveMode;
  }

  moveEditor(){
    if(!this.parent) return;
    this.parent.style.cursor = this.state.moveMode ? "default" : "grab";
    this.state.setMoveMode(!this.state.moveMode);
  }

  initEditorEvent(editorLayer:HTMLElement, parent:HTMLElement) {
    this.parent = parent;
    // 监听键盘的 keydown 事件
    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";
        }
    });
    

    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 isMoving = false;
    let moveX = 0, moveY = 0;
    parent.addEventListener("mousemove",(e:MouseEvent)=>{
        //this.state.setMouse({x: e.offsetX, y: e.offsetY});
        if (isMoving || e.button == 2) { //鼠标右键
            e.preventDefault();
            parent.style.cursor = "grab";
            const xOffset = e.pageX - moveX;
            const yOffset = e.pageY - moveY;
            this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
        }
        moveX = e.pageX;
        moveY = e.pageY;
    });

    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)=>{
        editorLayer.style.transformOrigin = "50% 50%";
        editorLayer.style.transform = `scale(${v})`;
    })
    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();
    }, 100);
  }

  updateCardSize() {
    const page = this.doms.page.value as HTMLElement;
    const state = this.state;
    page.style.left = (state.width - state.page.w) / 2.0 + "px";
    page.style.top = (state.height - state.page.h) / 2.0 + "px";

    console.log("size");

    this.updateEditorSize();
  }

  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});
  }

  autoInScreen() {
     this.updateEditorSize();
     this.setScale(1);
  }

  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);
  }

}