// 按照原有的樹(shù)結(jié)構(gòu)遍歷整個(gè) dom，變成我們自己需要的新對(duì)象 ElContainer
// ElContainer 主要包括坐標(biāo)位置和大小、樣式、子元素等
class ElContainer {
    constructor(global, el) { // global 就是存儲(chǔ)一些全局變量，目前只存儲(chǔ)全局的偏移量，因?yàn)橛?jì)算位置的時(shí)候需要減去它
        this.bounds = new Bounds(global, el); // 獲取位置和大小
        this.styles = window.getComputedStyle(el); // 這里為了方便直接把所有的樣式拿過(guò)來(lái)，其實(shí)可以按需過(guò)濾一下
        this.elements = []; // 子元素
        this.textNodes = []; // 文本節(jié)點(diǎn)比較特殊，單獨(dú)處理
        this.flags = 0; // falgs 標(biāo)志是否要?jiǎng)?chuàng)建層疊上下文
        this.el = el; // 元素的引用
    }
}
// 計(jì)算元素的位置和大小信息
class Bounds {
    constructor(global, el) {
        const { x = 0, y = 0 } = global.offset;
        const { top, left, width, height } = el.getBoundingClientRect();
        this.top = top - y;
        this.left = left - x;
        this.width = width;
        this.height = height;
    }
}
parseTree(global, el) {
    const container = this.createContainer(global, el);
    this.parseNodeTree(global, el, container);
    return container;
}
parseNodeTree(global, el, parent) {
    [...el.childNodes].map((child) => {
        if (child.nodeType === 3) {
            // 如果是文本節(jié)點(diǎn)
            if (child.textContent.trim().length > 0) {
                // 文本節(jié)點(diǎn)不為空
                const textElContainer = new TextElContainer(child.textContent, parent);
                parent.textNodes.push(textElContainer);
            }
        } else {
            // 如果是普通節(jié)點(diǎn)
            const container = this.createContainer(global, child);
            const { position, zIndex, opacity, transform } = container.styles;
            if ((position !== 'static' && !isNaN(zIndex)) || opacity < 1 || transform !== 'none') { // 需不需要?jiǎng)?chuàng)建層疊上下文的標(biāo)志，不理解可以先跳過(guò)，下面會(huì)講解
                container.flags = 1;
            }
            parent.elements.push(container);
            this.parseNodeTree(global, child, container);
        }
    });
}

class StackingContext { // 這就是層疊上下文
    constructor(container) {
        this.container = container;
        this.negativeZIndex = []; // zIndex為負(fù)的元素
        this.nonInlineLevel = []; // 塊級(jí)元素
        this.nonPositionedFloats = []; // 浮動(dòng)元素
        this.inlineLevel = []; // 內(nèi)聯(lián)元素
        this.positiveZIndex = []; // z-index大于等于1的元素
        this.zeroOrAutoZIndexOrTransformedOrOpacity = []; // 具有 transform、opacity、zIndex 為 auto 或 0 的元素
    }
}
// 開(kāi)始按層疊規(guī)則劃分
parseStackingContext(container) {
    const root = new StackingContext(container);
    this.parseStackTree(container, root);
    return root;
}
parseStackTree(parent, stackingContext) { // 這里簡(jiǎn)化了一些東西，stackingContext 是當(dāng)前層疊上下文
    parent.elements.map((child) => { // 開(kāi)始分組
        if (child.flags) { // 創(chuàng)建新的層疊上下文的標(biāo)識(shí)，上文中有提到（比如在遇到 z-index 的時(shí)候會(huì)置為 1）
            const stack = new StackingContext(child);
            const zIndex = child.styles.zIndex;
            if (zIndex > 0) { // zIndex 可能是 1、10、100，所以其實(shí)不是直接 push，而是要比較之后插入
                stackingContext.positiveZIndex.push(stack);
            } else if (zIndex < 0) {
                stackingContext.negativeZIndex.push(stack);
            } else {
                stackingContext.zeroOrAutoZIndexOrTransformedOrOpacity.push(stack);
            }
            this.parseStackTree(child, stack);
        } else {
            if (child.styles.display.indexOf('inline') >= 0) {
                stackingContext.inlineLevel.push(child);
            } else {
                stackingContext.nonInlineLevel.push(child);
            }
            this.parseStackTree(child, stackingContext);
        }
    });
}

createCanvas(el) {
    const { width, height } = el.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    const canvas = document.createElement('canvas');
    const ctx2d = canvas.getContext('2d');
    canvas.width = Math.round(width * dpr);
    canvas.height = Math.round(height * dpr);
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
    ctx2d.scale(dpr, dpr);
    this.canvas = canvas;
    this.ctx2d = ctx2d;
    return canvas;
}

// 根據(jù)劃分的層級(jí)數(shù)組，一層一層從下往上繪制，并且轉(zhuǎn)換成相對(duì)應(yīng)的 canvas 繪圖語(yǔ)句
render(stack) {
    const { negativeZIndex = [], nonInlineLevel = [], inlineLevel = [], positiveZIndex = [], zeroOrAutoZIndexOrTransformedOrOpacity = [] } = stack;
    this.ctx2d.save();
    // 1、先設(shè)置會(huì)影響全局的屬性，比如 transform 和 opacity
    this.setTransformAndOpacity(stack.container);
    // 2、繪制背景和邊框
    this.renderNodeBackgroundAndBorders(stack.container);
    // 3、繪制 zIndex < 0 的元素
    negativeZIndex.map((el) => this.render(el));
    // 4、繪制自身內(nèi)容
    this.renderNodeContent(stack.container);
    // 5、繪制塊狀元素
    nonInlineLevel.map((el) => this.renderNode(el));
    // 6、繪制行內(nèi)元素
    inlineLevel.map((el) => this.renderNode(el));
    // 7、繪制 z-index: auto || 0、transform: none、opacity小于1 的元素
    zeroOrAutoZIndexOrTransformedOrOpacity.map((el) => this.render(el));
    // 8、繪制 zIndex > 0 的元素
    positiveZIndex.map((el) => this.render(el));
    this.ctx2d.restore();
}
// 針對(duì)不同元素有不同的渲染方式，也就是開(kāi)篇提到的方式
renderNodeContent(container) {
    if (container.textNodes.length) {
        container.textNodes.map((text) => this.renderText(text, container.styles));
    } else if (container instanceof ImageElContainer) {
        this.renderImg(container);
    } else if (container instanceof InputElContainer) {
        this.renderInput(container);
    }
}
renderNode(container) {
    this.renderNodeBackgroundAndBorders(container);
    this.renderNodeContent(container);
}
renderText(text, styles) { // 這里只考慮影響字體的幾個(gè)因素，并不全面
    const { ctx2d } = this;
    ctx2d.save();
    ctx2d.font = `${styles.fontWeight} ${styles.fontSize} ${styles.fontFamily}`;
    ctx2d.fillStyle = styles.color;
    ctx2d.fillText(text.text, text.bounds.left, text.bounds.top);
    ctx2d.restore();
}
renderImg(container) { // 這里直接用頁(yè)面中的 img 元素進(jìn)行繪制，所以得等到圖片加載完成，不然就看不見(jiàn)圖片。正常寫(xiě)法應(yīng)該是在 img.onload 的回調(diào)中進(jìn)行繪制
    const { ctx2d } = this;
    const { el, bounds, styles } = container;
    ctx2d.drawImage(el, 0, 0, parseInt(styles.width), parseInt(styles.height), bounds.left, bounds.top, bounds.width, bounds.height);
}

class ElContainer {
    constructor(global, el) {
        // 獲取位置和大小，如果元素用了 transform，我們需要將其先還原，再獲取樣式，因?yàn)槲覀儧](méi)有克隆整個(gè) html，所以這里就這樣處理
        const transform = this.styles.transform;
        if (transform !== 'none') el.style.transform = 'none';
        this.bounds = new Bounds(global, el);
        if (transform !== 'none') el.style.transform = transform;
        // ...
    }
}

const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
                 <foreignObject height="100%" width="100%">${htmlString}</foreignObject>
             </svg>`;
const img = new Image();
img.src = `data:image/svg+xml,${svg}`;

ctx2d.drawImage(img, 0, 0);