@visactor/vrender-kits/es/window/contributions/browser-contribution.js

```typescript import { xxx } from '@visactor/vrender-kits'; ```

var BrowserWindowHandlerContribution_1, __decorate = this && this.__decorate || function(decorators, target, key, desc) {
    var d, c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
    return c > 3 && r && Object.defineProperty(target, key, r), r;
}, __metadata = this && this.__metadata || function(k, v) {
    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
};

import { injectable, BaseWindowHandlerContribution, ContainerModule, WindowHandlerContribution, application } from "@visactor/vrender-core";

import { Matrix, AABBBounds } from "@visactor/vutils";

import { BrowserCanvas } from "../../canvas/contributions/browser";

let BrowserWindowHandlerContribution = BrowserWindowHandlerContribution_1 = class extends BaseWindowHandlerContribution {
    get container() {
        return this.canvas.nativeCanvas.parentElement;
    }
    static GenerateCanvasId() {
        return `${BrowserWindowHandlerContribution_1.idprefix}_${BrowserWindowHandlerContribution_1.prefix_count++}`;
    }
    constructor() {
        super(), this.type = "browser", this._canvasIsIntersecting = !0, this.global = application.global, 
        this.viewBox = new AABBBounds, this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
    }
    getTitle() {
        return this.canvas.id && this.canvas.id.toString();
    }
    getWH() {
        return {
            width: this.canvas.width / (this.canvas.dpr || 1),
            height: this.canvas.height / (this.canvas.dpr || 1)
        };
    }
    getXY() {
        return this.canvas.nativeCanvas.getBoundingClientRect();
    }
    createWindow(params) {
        params.canvas ? this.createWindowByCanvas(params) : this.createWindowByConfig(params), 
        this.postInit();
    }
    postInit() {
        if (this.global.optimizeVisible) try {
            this.observerCanvas();
        } catch (err) {
            console.error("发生错误，该环境不存在IntersectionObserver");
        }
    }
    isElementVisible(el) {
        const rect = el.getBoundingClientRect(), vWidth = window.innerWidth || document.documentElement.clientWidth, vHeight = window.innerHeight || document.documentElement.clientHeight;
        return !(rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight);
    }
    observerCanvas() {
        this._canvasIsIntersecting = this.isElementVisible(this.canvas.nativeCanvas);
        const observer = new IntersectionObserver(((entries, observer) => {
            entries.forEach((entry => {
                this._canvasIsIntersecting !== entry.isIntersecting ? (this._canvasIsIntersecting = entry.isIntersecting, 
                this._onVisibleChangeCb && this._onVisibleChangeCb(entry.isIntersecting)) : this._canvasIsIntersecting = entry.isIntersecting;
            }));
        }));
        observer && observer.observe(this.canvas.nativeCanvas);
    }
    createWindowByConfig(params) {
        const nativeCanvas = this.global.createCanvas({
            width: params.width,
            height: params.height
        });
        let container;
        if (container = "string" == typeof params.container ? this.global.getElementById(params.container) : params.container ? params.container : this.global.getRootElement(), 
        !container) throw new Error("发生错误，containerId可能传入有误");
        params.offscreen ? container = null : container.appendChild(nativeCanvas);
        const options = {
            width: params.width,
            height: params.height,
            dpr: params.dpr,
            nativeCanvas: nativeCanvas,
            container: container,
            id: BrowserWindowHandlerContribution_1.GenerateCanvasId(),
            canvasControled: !0
        };
        this.canvas = new BrowserCanvas(options);
    }
    createWindowByCanvas(params) {
        var _a;
        let canvas;
        if ("string" == typeof params.canvas) {
            if (canvas = this.global.getElementById(params.canvas), !canvas) throw new Error("canvasId 参数不正确，请确认canvas存在并插入dom");
        } else canvas = params.canvas;
        if (!canvas) throw new Error("发生错误，传入的canvas不正确");
        let width = params.width, height = params.height;
        if (null == width || null == height || !params.canvasControled) {
            const data = canvas.getBoundingClientRect();
            width = data.width, height = data.height;
        }
        let dpr = params.dpr;
        if (null == dpr) {
            dpr = null !== (_a = canvas.getContext("2d").pixelRatio) && void 0 !== _a ? _a : canvas.width / width;
        }
        this.canvas = new BrowserCanvas({
            width: width,
            height: height,
            dpr: dpr,
            nativeCanvas: canvas,
            canvasControled: params.canvasControled
        });
    }
    releaseWindow() {
        this.canvas.release();
    }
    resizeWindow(width, height) {
        this.canvas.resize(width, height);
    }
    setDpr(dpr) {
        this.canvas.dpr = dpr;
    }
    getContext() {
        return this.canvas.getContext();
    }
    getNativeHandler() {
        return this.canvas;
    }
    getDpr() {
        return this.canvas.dpr;
    }
    addEventListener(type, listener, options) {
        return this.canvas.nativeCanvas.addEventListener(type, listener, options);
    }
    removeEventListener(type, listener, options) {
        return this.canvas.nativeCanvas.removeEventListener(type, listener, options);
    }
    dispatchEvent(event) {
        return this.canvas.nativeCanvas.dispatchEvent(event);
    }
    getStyle() {
        var _a;
        return null !== (_a = this.canvas.nativeCanvas.style) && void 0 !== _a ? _a : {};
    }
    setStyle(style) {
        this.canvas.nativeCanvas.style = style;
    }
    getBoundingClientRect() {
        const c = this.canvas.nativeCanvas, wh = this.getWH();
        return c.parentElement ? this.canvas.nativeCanvas.getBoundingClientRect() : {
            x: 0,
            y: 0,
            width: wh.width,
            height: wh.height,
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
        };
    }
    clearViewBox(color) {
        const vb = this.viewBox, context = this.getContext(), dpr = this.getDpr();
        context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), 
        context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, 
        context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
    }
    isVisible(bbox) {
        return this._canvasIsIntersecting;
    }
    onVisibleChange(cb) {
        this._onVisibleChangeCb = cb;
    }
    getTopLeft(baseWindow) {
        return this.global.getElementTopLeft(this.canvas.nativeCanvas, baseWindow);
    }
};

BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution.idprefix = "visactor_window", 
BrowserWindowHandlerContribution.prefix_count = 0, BrowserWindowHandlerContribution = BrowserWindowHandlerContribution_1 = __decorate([ injectable(), __metadata("design:paramtypes", []) ], BrowserWindowHandlerContribution);

export { BrowserWindowHandlerContribution };

export const browserWindowModule = new ContainerModule((bind => {
    bind(BrowserWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue((ctx => ctx.container.get(BrowserWindowHandlerContribution))).whenTargetNamed(BrowserWindowHandlerContribution.env);
}));
//# sourceMappingURL=browser-contribution.js.map