persagy-web/persagy-web-edit/src/items/SBaseImageEdit.ts

/*
 * *********************************************************************************************************************
 *
 *          !!
 *        .F88X
 *        X8888Y
 *      .}888888N;
 *        i888888N;        .:!              .I$WI:
 *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
 *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
 *            +888888N;  .8888888Y                                  "&&8Y.}8,
 *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
 *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
 *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
 *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
 *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
 *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
 *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
 *      .:R888888I
 *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
 *        ~8888'
 *        .!88~                                                                     All rights reserved.
 *
 * *********************************************************************************************************************
 */

import { SPainter, SRect, SSize, SColor, SPoint } from "@persagy-web/draw";
import { SImageShowType, STextOrigin } from "@persagy-web/graph";
import { SGraphItem, SAnchorItem, SLineStyle } from "@persagy-web/graph";
import { SItemStatus } from "@persagy-web/big";
import { SGraphEdit } from "..";
import {
    ItemOrder,
    Marker,
    svgTobase64,
    svgUrlTobase64
} from "@persagy-web/big/lib";
import { SMouseEvent } from "@persagy-web/base/lib";

/**
 * 图片编辑类
 *
 * @author  韩耀龙 <han_yao_long@163.com>
 */
export class SBaseImageEdit extends SGraphEdit {
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //属性
    /** item 数据*/
    get data(): Marker | null {
        return this._data;
    } // Get data
    set data(v: Marker | null) {
        this._data = v;
        // 数据存在,则初始化数据
        if (v) {
            this.initData(v);
            this.update();
        }
    } // Set data

    // default url key
    defaultUrl: string = "";
    /** 起始锚点 */
    startItem: SGraphItem | null = null;
    /** 结束锚点 */
    endItem: SGraphItem | null = null;
    /** 图片 */
    img: CanvasImageSource | undefined;
    /** 展示模式 */
    private _showType: SImageShowType = SImageShowType.Full;
    get showType(): SImageShowType {
        return this._showType;
    }
    set showType(v: SImageShowType) {
        this._showType = v;
        this.computeImgSize();
        this.update();
    }

    /** 边框色 */
    private _strokeColor: SColor = SColor.Transparent;
    get strokeColor(): SColor {
        return this._strokeColor;
    }
    set strokeColor(v: SColor) {
        this._strokeColor = v;
        this.update();
    }

    /** 边框宽度 */
    private _lineWidth: number = 1;
    get lineWidth(): number {
        return this._lineWidth;
    }
    set lineWidth(v: number) {
        this._lineWidth = v;
        this.update();
    }

    /** 原点位置 */
    private _originPosition: STextOrigin = STextOrigin.LeftTop;
    get originPosition(): STextOrigin {
        return this._originPosition;
    }
    set originPosition(v: STextOrigin) {
        this._originPosition = v;
        this.update();
    }

    /** 线条样式 */
    private _lineStyle: SLineStyle = SLineStyle.Solid;
    get lineStyle(): SLineStyle {
        return this._lineStyle;
    }
    set lineStyle(v: SLineStyle) {
        this._lineStyle = v;
        this.update();
    }

    // 新增测试属性
    _filterColor: string = "";
    get filterColor() {
        return this._filterColor;
    }
    set filterColor(v) {
        this._filterColor = v;
        this.changeSvgColor(v);
    }

    /** 图片加载是否完成 */
    isLoadOver: boolean = false;

    /** 图片的宽度 */
    private imgWidth: number = this.width;

    /** 图片的高度 */
    private imgHeight: number = this.height;

    /** 图片地址 */
    private _url: string = "";
    get url(): string {
        return this._url;
    }
    set url(v: string) {
        // 处理svg
        if (v.endsWith(".svg")) {
            this.initSvg(v);
        } else {
            this.initUrl(v);
        }
    }
    /** svgUrl 字符串 */
    svgUrl: string = "";

    /** 锚点 list */
    anchorList: SAnchorItem[] = [];
    /** 宽度 */
    private _width: number = 64;
    /** 原点 */
    origin = new SPoint();
    get width(): number {
        return this._width;
    }
    set width(v: number) {
        if (v >= 0) {
            // 宽度有效
            if (v != this._width) {
                // 宽度更新
                let w = this._width;
                this._width = v;
                this.onResize(
                    new SSize(w, this._height),
                    new SSize(this._width, this._height)
                );
            }
        }
        this.update();
    } //Set width

    /** 高度 */
    private _height: number = 64;
    get height(): number {
        return this._height;
    }
    set height(v: number) {
        if (v >= 0) {
            // 高度有效
            if (v != this._height) {
                // 高度更新
                let h = this._height;
                this._height = v;
                this.onResize(
                    new SSize(this._width, h),
                    new SSize(this._width, this._height)
                );
            }
        }
        this.update();
    } //Set height

    /**编辑状态 */
    protected _status: SItemStatus = SItemStatus.Normal;
    get status(): SItemStatus {
        return this._status;
    }
    set status(value: SItemStatus) {
        const oldStatus = this._status;
        const newStatus = value;
        this._status = value;
        //状态变更触发事件
        this.$emit("StatusChange", oldStatus, newStatus);
        this.update();
    }

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // 函数
    /**
     * 构造函数
     *
     * @param parent    指向父对象
     * @param data      数据
     */
    constructor(parent: SGraphItem | null, data: Marker | null = null) {
        super(parent);
        if (data) {
            this.data = data;
        }
    }

    /**
     * 如果 data 设置；初始化data
     */
    initData(data: Marker): void {
        this.zOrder = ItemOrder.imageOrder;
        // this.isTransform = false;
        this.url =
            // eslint-disable-next-line max-len
            "data:image/png;base64,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";
        this.name = data.name;
        this.moveTo(data.pos.x, data.pos.y);
        if (data.size) {
            // 设置 size 宽高
            this.width = data.size.width;
            this.height = data.size.height;
        }

        if (data.style && data.style.default) {
            // 存在默认 style
            if (data.style.default.zorder) {
                // 设置层级
                this.zOrder = data.style.default.zorder;
            }

            // 图片url
            if (data.style.default.url) {
                this.defaultUrl = data.style.default.url;
            }

            // 线宽
            if (data.style.default.lineWidth) {
                this.lineWidth = data.style.default.lineWidth;
            }

            // 线颜色
            if (data.style.default.strokeColor) {
                this.strokeColor = new SColor(data.style.default.strokeColor);
            }

            // 线样式
            if (data.style.default.lineStyle) {
                this.lineStyle = data.style.default.lineStyle;
            }

            this.origin = new SPoint(this.width / 2, this.height / 2);
        }
    } // Function initData()

    /**
     * 初始化svgurl
     *
     * @param v url字符串
     */
    initSvg(v: any): void {
        this._url = v;
        svgTobase64(this.url)
            .then(res => {
                this.initUrl(res);
            })
            .catch(res => {
                this.initUrl(res);
            });
    }

    /**
     * svg 添加滤镜
     *
     * @param {*} val 修改svg图对应的色值（矩阵）
     */
    changeSvgColor(val: string): void {
        const parser = new DOMParser();
        const doc = parser.parseFromString(this.svgUrl, "text/xml");
        const svgDom = doc.children[0];
        // @ts-ignore
        svgDom.style.filter = "url('#lighten')";
        const colorDefs = parser.parseFromString(
            `<defs>
        <filter id="lighten">
          <feColorMatrix
            type="matrix"
            values=${val}/>
        </filter>
            </defs>`,
            "text/xml"
        );
        svgDom.appendChild(colorDefs.children[0]);
        const a = svgUrlTobase64(svgDom);
        this.initUrl(a);
    }

    /**
     * 初始化url
     *
     * @param v url字符串
     */
    initUrl(v: any): void {
        this._url = v;
        this.img = new Image();
        this.img.onload = (e): void => {
            const isiOS = !!navigator.userAgent.match(
                /\(i[^;]+;( U;)? CPU.+Mac OS X/
            );
            if (isiOS) {
                this.isLoadOver = true;
                this.computeImgSize();
                this.$emit("imgLoadOver");
                // 如果有填充色则设置填充色
                if (this._filterColor) {
                    this.changeSvgColor(this._filterColor);
                }
                this.update();
            } else {
                // @ts-ignore
                const imgSrc = e.path[0].src;
                if (this.isUrlIdentical(imgSrc)) {
                    // 当前地址和回调地址相同
                    this.isLoadOver = true;
                    this.computeImgSize();
                    this.$emit("imgLoadOver");
                    this.update();
                }
            }
        };

        this.img.onerror = (e): void => {
            // @ts-ignore
            const imgSrc = e.path[0].src;
            if (this.isUrlIdentical(imgSrc)) {
                // 当前地址和回调地址相同
                this.isLoadOver = false;
                this.$emit("imgLoadOver");
                this.update();
                console.log("加载图片错误！", e);
            }
        };

        this.img.src = v;
    }

    /**
     * 将类中得数据转换为方便存储格式的方法
     *
     * @return 针对 item 类型保持相应的格式
     */
    toData(): any {
        // 数据不存在,不处理
        if (!this.data) {
            return;
        }
        if (this.data.size) {
            // data中存在 size, 则设置 size
            this.data.size.width = this.width;
            this.data.size.height = this.height;
        } else {
            // 否则设置默认
            const width = this.width;
            const height = this.height;
            this.data.size = {
                width,
                height
            };
        }

        this.data.pos.x = this.pos.x;
        this.data.pos.y = this.pos.y;
        this.data.style.default.zorder = this.zOrder;
        this.data.style.default.url = this.defaultUrl;
        this.data.style.default.lineWidth = this.lineWidth;
        this.data.style.default.strokeColor = this.strokeColor.value;
        this.data.style.default.lineStyle = this.lineStyle;
        return this.data;
    }

    /**
     * 根据显示模式计算图片的宽高
     */
    computeImgSize(): void {
        // 图片加载完成
        if (this.isLoadOver) {
            // 要绘制图片的宽度
            let width = 0;
            // 要绘制图片的宽度
            let height = 0;
            // 图片 item 的宽高比
            let itemAspectRatio: number = this.width / this.height;
            // 原始图片的宽高比
            let imgAspectRatio: number =
                // @ts-ignore
                (this.img.width as number) / (this.img.height as number);
            // 原始图片的高宽比
            let imgHwRatio: number =
                // @ts-ignore
                (this.img.height as number) / (this.img.width as number);
            if (this.showType == SImageShowType.Full) {
                width = this.width;
                height = this.height;
            } else if (this.showType == SImageShowType.Equivalency) {
                if (itemAspectRatio > imgAspectRatio) {
                    height = this.height;
                    width = imgAspectRatio * height;
                } else if (itemAspectRatio < imgAspectRatio) {
                    width = this.width;
                    height = width * imgHwRatio;
                } else {
                    width = this.width;
                    height = this.height;
                }
            } else if (this.showType == SImageShowType.AutoFit) {
                // @ts-ignore
                this.width = this.img.width as number;
                // @ts-ignore
                this.height = this.img.height as number;
                width = this.width;
                height = this.height;
            }

            this.imgWidth = width;
            this.imgHeight = height;
            // 设置原点位置(默认左上角)
            if (this.originPosition == STextOrigin.Center) {
                this.origin = new SPoint(this.width / 2, this.height / 2);
            }
        }

        this.origin = new SPoint(this.width / 2, this.height / 2);
        this.update();
    }

    /**
     * 判断当前地址和回调地址是否相同
     *
     * @param imgUrl     图片回调地址
     * @return 当前地址和回调地址是否相同
     */
    private isUrlIdentical(imgUrl: string): boolean {
        // url 中没有该片段
        if (this.url.indexOf("://") == -1) {
            // eslint-disable-next-line max-len
            const reg = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
            if (reg.test(this.url)) {
                // 通过正则检验
                return this.url == imgUrl;
            } else {
                // 否则
                return this.url == this.GetUrlRelativePath(imgUrl);
            }
        } else {
            // 否则
            return this.url == imgUrl;
        }
    }

    /**
     * 截取绝对路径中的相对路径
     *
     * @param url     绝对路径
     * @return 相对路径
     */
    private GetUrlRelativePath(url: string): string {
        const arrUrl = url.split("//");
        const start = arrUrl[1].indexOf("/");
        const relUrl = arrUrl[1].substring(start);
        return relUrl;
    }

    /**
     * 大小改变
     *
     * @param oldSize    旧数据
     * @param newSize    新数据
     */
    resize(oldSize: SRect, newSize: SRect): void {
        this.width = newSize.width;
        this.height = newSize.height;
        this.update();
    }

    /**
     * Item 对象边界区域
     *
     * @return	边界区域
     */
    boundingRect(): SRect {
        return new SRect(
            -this.origin.x,
            -this.origin.y,
            this.width * 1,
            this.height * 1
        );
    }

    /**
     * 宽高发发生变化
     *
     * @param oldSize   改之前的大小
     * @param newSize   改之后大小
     */
    protected onResize(oldSize: SSize, newSize: SSize): void {
        this.computeImgSize();
        this.update();
    }

    /**
     * 鼠标按下事件
     *
     * @param event   保存事件参数
     * @return 是否处理事件
     */
    onMouseDown(event: SMouseEvent): boolean {
        super.onMouseDown(event);
        return this.moveable;
    } // Function onMouseDown()

    /**
     * 释放鼠标事件
     *
     * @param event   保存事件参数
     * @return 是否处理事件
     */
    onMouseUp(event: SMouseEvent): boolean {
        super.onMouseUp(event);
        return this.moveable;
    } // Function onMouseUp()

    /**
     * Item 绘制操作
     *
     * @param painter    绘画类
     */
    onDraw(painter: SPainter): void {
        painter.translate(-this.origin.x, -this.origin.y);
        // 图片加载完成
        if (this.isLoadOver) {
            // @ts-ignore
            painter.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight);
        }

        if (this.selected) {
            // 选中
            painter.shadow.shadowBlur = 10;
            painter.shadow.shadowColor = new SColor(`#00000033`);
            painter.shadow.shadowOffsetX = 5;
            painter.shadow.shadowOffsetY = 5;
        } else {
            // 否则
            painter.shadow.shadowColor = SColor.Transparent;
        }

        if (this.lineStyle == SLineStyle.Dashed) {
            // 线类型为虚线
            painter.pen.lineDash = [
                painter.toPx(this.lineWidth * 3),
                painter.toPx(this.lineWidth * 7)
            ];
        } else if (this.lineStyle == SLineStyle.Dotted) {
            // 线类型是点线
            painter.pen.lineDash = [
                painter.toPx(2 * this.lineWidth),
                painter.toPx(2 * this.lineWidth)
            ];
        }

        painter.pen.lineWidth = this.lineWidth;
        painter.pen.color = this.strokeColor;
        painter.brush.color = SColor.Transparent;
        painter.drawRect(0, 0, this.width, this.height);
    }
}