/**
 * 判斷兩條線段是否想交
 * @param a1 線段1 起點(diǎn)
 * @param a2 線段1 終點(diǎn)
 * @param b1 線段2 起點(diǎn)
 * @param b2 線段3 終點(diǎn)
 */
static intersectLineLine(a1: Point, a2: Point, b1: Point, b2: Point): Intersection {
    // 向量叉乘公式 `a??b = (x1, y1)??(x2, y2) = x1y2 - x2y1`
    let result,
        // b1->b2向量 與 a1->b1向量的向量叉乘
        ua_t = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x),
        // a1->a2向量 與 a1->b1向量的向量叉乘
        ub_t = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x),
        // a1->a2向量 與 b1->b2向量的向量叉乘
        u_b = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y);
    if (u_b !== 0) {
        let ua = ua_t / u_b,
            ub = ub_t / u_b;
        if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {
            result = new Intersection('Intersection');
            result.points.push(new Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y)));
        } else {
            result = new Intersection('No Intersection');
        }
    } else {
        // u_b == 0時(shí)，角度為0或者180 平行或者共線不屬于相交
        if (ua_t === 0 || ub_t === 0) {
            result = new Intersection('Coincident');
        } else {
            result = new Intersection('Parallel');
        }
    }
    return result;
}

/**
 * Group 類(lèi)，可用于自己手動(dòng)組合幾個(gè)物體，也可以用于拖藍(lán)選區(qū)包圍的物體
 * Group 雖然繼承至 FabricObject，但是要注意獲取某些屬性有時(shí)是沒(méi)有的，因?yàn)樽游矬w的屬性各不相同
 */
class Group extends FabricObject {
    public type: string = 'group';
    public objects: FabricObject[]; // 組中所有的物體
    constructor(objects: FabricObject[], options: any = {}) {
        super(options);
        this.objects = objects || [];
        this._calcBounds(); // 計(jì)算組的包圍盒
        this._updateObjectsCoords(); // 更新組中的物體信息
    }
    /** 計(jì)算組的包圍盒 */
    _calcBounds() {
        // 就是求子物體中所有 objects 的最大最小 xy 值
    }
    /** 更新所有子物體的坐標(biāo)值，像這種情況子物體都是以父元素的坐標(biāo)系為參考，而不是畫(huà)布的坐標(biāo)系為參考 */
    _updateObjectsCoords() {
        let groupDeltaX = this.left,
            groupDeltaY = this.top;
        this.objects.forEach((object) => {
            let objectLeft = object.get('left'),
                objectTop = object.get('top');
            object.set('originalLeft', objectLeft);
            object.set('originalTop', objectTop);
            object.set('left', objectLeft - groupDeltaX);
            object.set('top', objectTop - groupDeltaY);
            object.setCoords();
            // 當(dāng)有選中組的時(shí)候，不顯示子物體的控制點(diǎn)
            object.orignHasControls = object.hasControls;
            object.hasControls = false;
        });
    }
    /** 將物體添加到 group 中 */
    add(object: FabricObject) {
        this.objects.push(object);
        return this;
    }
    /** 將物體從 group 中移除 */
    remove(object: FabricObject) {
        Util.removeFromArray(this.objects, object);
        return this;
    }
    /** 將物體添加到 group 中，并重新計(jì)算位置尺寸等 */
    addWithUpdate(object: FabricObject): Group {
        this._restoreObjectsState();
        this.objects.push(object);
        this._calcBounds();
        this._updateObjectsCoords();
        return this;
    }
    /** 將物體從組中移除，并重新計(jì)算組的大小位置 */
    removeWithUpdate(object: FabricObject) {
        this._restoreObjectsState();
        Util.removeFromArray(this.objects, object);
        object.setActive(false);
        this._calcBounds();
        this._updateObjectsCoords();
        return this;
    }
    /** 組的渲染會(huì)特殊一點(diǎn)，它主要是子物體的渲染，但是組的變換會(huì)影響所有子物體的變換 */
    render(ctx: CanvasRenderingContext2D) {
        ctx.save();
        this.transform(ctx); // 組有自身的變換，會(huì)影響所有子物體
        for (let i = 0, len = this.objects.length; i < len; i++) { // 遍歷繪制組中所有物體
            let object = this.objects[i],
            object.render(ctx); // 回顧一下：每個(gè)物體的 render = 每個(gè)物體的 transform + 每個(gè)物體的 _render
        }
        if (this.active) { // 組是否被選中
            this.drawBorders(ctx);
            this.drawControls(ctx);
        }
        ctx.restore();
        this.setCoords();
    }
}

class Canvas {
    /** 
     * 獲取拖藍(lán)選區(qū)包圍的元素
     * 如果只有一個(gè)物體，那就是普通的點(diǎn)選；如果有多個(gè)物體，那就生成一個(gè)組
     */
    _findSelectedObjects(e: MouseEvent) {
        let objects: FabricObject[] = [], // 存儲(chǔ)最終框選的元素
            x1 = this._groupSelector.ex,
            y1 = this._groupSelector.ey,
            x2 = x1 + this._groupSelector.left,
            y2 = y1 + this._groupSelector.top,
            selectionX1Y1 = new Point(Math.min(x1, x2), Math.min(y1, y2)),
            selectionX2Y2 = new Point(Math.max(x1, x2), Math.max(y1, y2));
        for (let i = 0, len = this._objects.length; i < len; ++i) {
            let currentObject = this._objects[i];
            // 物體是否與拖藍(lán)選區(qū)相交或者被選區(qū)包含，用到的就是前面說(shuō)過(guò)的多邊形相交算法，具體的算法會(huì)在文末附上
            if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) || currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2)) {
                currentObject.setActive(true);
                objects.push(currentObject);
            }
        }
        if (objects.length === 1) { // 如果只有一個(gè)物體被選中
            this.setActiveObject(objects[0], e);
        } else if (objects.length > 1) { // 如果有多個(gè)物體被選中
            const newGroup = new Group(objects);
            this.setActiveGroup(newGroup);
        }
        this.renderAll();
    }
    setActiveGroup(group: Group): Canvas {
        this._activeGroup = group;
        if (group) {
            group.canvas = this;
            group.setActive(true);
        }
        return this;
    }
}

class Canvas {
    renderAll(): Canvas {
        ...
        // 先將物體排個(gè)序，這樣才能體現(xiàn)出層級(jí)關(guān)系，簡(jiǎn)單來(lái)說(shuō)就是先繪制未激活物體，再繪制激活物體
        const sortedObjects = this._chooseObjectsToRender();
        for (let i = 0, len = sortedObjects.length; i < len; ++i) {
            this._draw(canvasToDrawOn, sortedObjects[i]);
        }
        return this;
    }
    /** 將所有物體分成兩個(gè)組，一組是未激活態(tài)，一組是激活態(tài)，然后將激活組放在最后，這樣就能夠繪制到最上層 */
    _chooseObjectsToRender() {
        // 當(dāng)前有沒(méi)有激活的物體
        let activeObject = this.getActiveObject();
        // 當(dāng)前有沒(méi)有激活的組（也就是多個(gè)物體）
        let activeGroup = this.getActiveGroup();
        // 最終要渲染的物體順序，也就是把激活的物體放在后面繪制
        let objsToRender = [];
        if (activeGroup) { // 如果選中多個(gè)物體
            const activeGroupObjects = [];
            for (let i = 0, length = this._objects.length; i < length; i++) {
                let object = this._objects[i];
                if (activeGroup.contains(object)) {
                    activeGroupObjects.push(object);
                } else {
                    objsToRender.push(object);
                }
            }
            objsToRender.push(activeGroup);
        } else if (activeObject) { // 如果只選中一個(gè)物體
            let index = this._objects.indexOf(activeObject);
            objsToRender = this._objects.slice();
            if (index > -1) {
                objsToRender.splice(index, 1);
                objsToRender.push(activeObject);
            }
        } else { // 所有物體都沒(méi)被選中
            objsToRender = this._objects;
        }
        return objsToRender;
    }