queenshow/src/modules/editor/objects/Elements/image.ts

import { effect } from "vue";
import { CompBase } from "./base"
import { HistoryController } from "./history";
import { Dict_Imgs } from "@/dict";

export type ImageValue = {
    url: string;
    showLink: boolean;
    link: string;
    initSized?: boolean
}

export type ImageContenValue = {
    url: string;
}

export class CompImageContent extends CompBase<ImageContenValue> {
    override onCreated() {
        this.compKey = "ImageContent" as any;
    }
}   
    

export class CompImage extends CompBase<ImageValue> {
    
   override onCreated() {
        this.compKey = "Image";
        this.state.size = [750, 400];
        this.state.bgColor = "green";
        this.value.initSized = false;
        this.state.children.push(new CompImageContent({url: this.value.url}))
   }

   get imageObj() {
      return this.state.children[0];
   }

    override init(): void {
        super.init();

        this.value.onUrlChanged((value, old)=>{
            console.log("iamge url change=>", value, old)
            if (value != old) {//重新把对象放置在容器中间

            }
        })
        this.updateTransform();
    }
}


export async function createImageComp(url:string = Dict_Imgs.Default): Promise<CompImage> {
    return new Promise((r)=>{

        const obj = new CompImage({url: url, showLink: false, link: ""})
        const isDefaultUrl = url == Dict_Imgs.Default;
        const size = obj.state.size;
        const temImg = new Image();
        temImg.src = url;
        temImg.onload = function () {
          const ratio = temImg.width / temImg.height;
          if (!isDefaultUrl) { //不是默认的图片
                const W = temImg.width > 750 ? 750 : temImg.width;
                const h  = W / ratio;
                obj.state.size = [W, h];
                obj.imageObj.state.size = [W, h];
                obj.imageObj.updateTransform();
          } else { //保持默认的750x400尺寸 cantain
            const r1 = size[0] / size[1];
            let srcWidth = size[0]
            let srcHeight = size[1]
            let srcOffx = 0, srcOffy=0;
            if (r1 < ratio) { 
                const s = size[1] / temImg.height
                srcWidth = temImg.width * s;
                srcOffx = (size[0] - srcWidth) /2.0;
            }  else {
                //高度不变,计算宽度
                const s = size[0] / temImg.width
                srcHeight = s * temImg.height;
                srcOffy = (size[1] - srcHeight) / 2.0;
            }
            obj.imageObj.state.size = [srcWidth, srcHeight];
            obj.imageObj.state.pos = [srcOffx, srcOffy];
            obj.imageObj.updateTransform();
          }
          obj.init();

          r(obj);
        };
    })
}