@visactor/vrender-kits 0.16.0-alpha.6 → 0.16.0

package/es/canvas/contributions/browser/context.d.ts

@@ -0,0 +1,176 @@
+import type { IPointLike, TextMeasure, ITextMeasureSpec } from '@visactor/vutils';
+import { Matrix } from '@visactor/vutils';
+import type { ICamera, ICanvas, ICommonStyleParams, IConicalGradientData, IContext2d, ISetCommonStyleParams, ISetStrokeStyleParams, IStrokeStyleParams, ITextStyleParams, mat4, EnvType, vec3 } from '@visactor/vrender-core';
+export declare class BrowserContext2d implements IContext2d {
+    static env: EnvType;
+    drawPromise?: Promise<any>;
+    mathTextMeasure: TextMeasure<ITextMeasureSpec>;
+    canvas: ICanvas;
+    camera?: ICamera;
+    modelMatrix?: mat4;
+    nativeContext: CanvasRenderingContext2D | any;
+    _inuse: boolean;
+    stack: Matrix[];
+    disableFill?: boolean;
+    disableStroke?: boolean;
+    disableBeginPath?: boolean;
+    protected matrix: Matrix;
+    protected applyedMatrix?: Matrix;
+    fontFamily: string;
+    fontSize: number;
+    set fillStyle(d: string | CanvasGradient | CanvasPattern);
+    get fillStyle(): string | CanvasGradient | CanvasPattern;
+    set font(d: string);
+    get font(): string;
+    set globalAlpha(d: number);
+    get globalAlpha(): number;
+    set lineCap(d: CanvasLineCap);
+    get lineCap(): CanvasLineCap;
+    set lineDashOffset(d: number);
+    get lineDashOffset(): number;
+    set lineJoin(d: CanvasLineJoin);
+    get lineJoin(): CanvasLineJoin;
+    set lineWidth(d: number);
+    get lineWidth(): number;
+    set miterLimit(d: number);
+    get miterLimit(): number;
+    set shadowBlur(d: number);
+    get shadowBlur(): number;
+    set shadowColor(d: string);
+    get shadowColor(): string;
+    set shadowOffsetX(d: number);
+    get shadowOffsetX(): number;
+    set shadowOffsetY(d: number);
+    get shadowOffsetY(): number;
+    set strokeStyle(d: string | CanvasGradient | CanvasPattern);
+    get strokeStyle(): string | CanvasGradient | CanvasPattern;
+    set textAlign(d: CanvasTextAlign);
+    get textAlign(): CanvasTextAlign;
+    set textBaseline(d: CanvasTextBaseline);
+    get textBaseline(): CanvasTextBaseline;
+    get inuse(): boolean;
+    set inuse(use: boolean);
+    dpr: number;
+    constructor(canvas: ICanvas, dpr: number);
+    reset(): void;
+    getCanvas(): ICanvas;
+    getContext(): any;
+    setTransformForCurrent(force?: boolean): void;
+    get currentMatrix(): Matrix;
+    cloneMatrix(m: Matrix): import("@visactor/vutils").IMatrix;
+    clear(): void;
+    restore(): void;
+    highPerformanceRestore(): void;
+    rotate(rad: number, setTransform?: boolean): void;
+    save(): void;
+    highPerformanceSave(): void;
+    scale(sx: number, sy: number, setTransform?: boolean): void;
+    setScale(sx: number, sy: number, setTransform?: boolean): void;
+    scalePoint(sx: number, sy: number, px: number, py: number, setTransform?: boolean): void;
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number, setTransform?: boolean, dpr?: number): void;
+    setTransformFromMatrix(matrix: Matrix, setTransform?: boolean, dpr?: number): void;
+    resetTransform(setTransform?: boolean, dpr?: number): void;
+    transform(a: number, b: number, c: number, d: number, e: number, f: number, setTransform?: boolean): void;
+    transformFromMatrix(matrix: Matrix, setTransform?: boolean): void;
+    translate(x: number, y: number, setTransform?: boolean): void;
+    rotateDegrees(deg: number, setTransform?: boolean): void;
+    rotateAbout(rad: number, x: number, y: number, setTransform?: boolean): void;
+    rotateDegreesAbout(deg: number, x: number, y: number, setTransform?: boolean): void;
+    beginPath(): void;
+    clip(fillRule?: CanvasFillRule): void;
+    clip(path: Path2D, fillRule?: CanvasFillRule): void;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean, z?: number): void;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number, z?: number): void;
+    closePath(): void;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
+    lineTo(x: number, y: number, z: number): void;
+    moveTo(x: number, y: number, z: number): void;
+    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number, z: number): void;
+    rect(x: number, y: number, w: number, h: number, z: number): void;
+    createImageData(imageDataOrSw: number | ImageData, sh?: number): ImageData;
+    createLinearGradient(x0: number, y0: number, x1: number, y1: number): any;
+    createPattern(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement, repetition: string): CanvasPattern;
+    createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
+    createConicGradient(x: number, y: number, startAngle: number, endAngle: number): IConicalGradientData;
+    fill(path?: Path2D, fillRule?: CanvasFillRule): void;
+    fillRect(x: number, y: number, width: number, height: number): void;
+    clearRect(x: number, y: number, w: number, h: number): void;
+    project(x: number, y: number, z: number): IPointLike;
+    view(x: number, y: number, z: number): vec3;
+    fillText(text: string, x: number, y: number, z: number): void;
+    getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;
+    getLineDash(): number[];
+    isPointInPath(x: number, y: number): any;
+    isPointInStroke(x: number, y: number): any;
+    measureText(text: string, method?: 'native' | 'simple' | 'quick'): {
+        width: number;
+    };
+    putImageData(imagedata: ImageData, dx: number, dy: number): void;
+    setLineDash(segments: number[]): void;
+    stroke(path?: Path2D): void;
+    strokeRect(x: number, y: number, width: number, height: number): void;
+    strokeText(text: string, x: number, y: number, z: number): void;
+    drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, dstX: number, dstY: number): void;
+    drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, dstX: number, dstY: number, dstW: number, dstH: number): void;
+    drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, srcX: number, srcY: number, srcW: number, srcH: number, dstX: number, dstY: number, dstW: number, dstH: number): void;
+    protected fillAttributes: {
+        opacity: number;
+        fillOpacity: number;
+        shadowBlur: number;
+        shadowColor: string;
+        shadowOffsetX: number;
+        shadowOffsetY: number;
+        fill: import("@visactor/vrender-core").IFillType;
+    };
+    protected strokeAttributes: {
+        opacity: number;
+        outerBorder: Partial<import("@visactor/vrender-core").IBorderStyle>;
+        innerBorder: Partial<import("@visactor/vrender-core").IBorderStyle>;
+        strokeOpacity: number;
+        lineDash: number[];
+        lineDashOffset: number;
+        lineWidth: number;
+        lineCap: CanvasLineCap;
+        lineJoin: CanvasLineJoin;
+        miterLimit: number;
+        strokeBoundsBuffer: number;
+        stroke: import("@visactor/vrender-core").IStrokeType | import("@visactor/vrender-core").IStrokeType[];
+    };
+    protected textAttributes: {
+        opacity: number;
+        text: string | number | number[] | string[];
+        maxLineWidth: number;
+        textAlign: import("@visactor/vrender-core").TextAlignType;
+        textBaseline: import("@visactor/vrender-core").TextBaselineType;
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: string | number;
+        ellipsis: string | boolean;
+        fontVariant: string;
+        fontStyle: string;
+        lineHeight: number;
+        underline: number;
+        lineThrough: number;
+        scaleIn3d: boolean;
+        direction: "horizontal" | "vertical";
+        verticalMode: number;
+        wordBreak: "break-word" | "break-all";
+        ignoreBuf: boolean;
+    };
+    setCommonStyle(params: ISetCommonStyleParams, attribute: ICommonStyleParams, offsetX: number, offsetY: number, defaultParams?: ICommonStyleParams | Partial<ICommonStyleParams>[]): void;
+    protected _setCommonStyle(params: ISetCommonStyleParams, attribute: ICommonStyleParams, offsetX: number, offsetY: number, defaultParams?: ICommonStyleParams): void;
+    setShadowBlendStyle(params: ISetCommonStyleParams, attribute: ICommonStyleParams, defaultParams?: ICommonStyleParams | Partial<ICommonStyleParams>[]): void;
+    protected _clearShadowStyle: boolean;
+    protected _clearFilterStyle: boolean;
+    protected _clearGlobalCompositeOperationStyle: boolean;
+    protected _setShadowBlendStyle(params: ISetCommonStyleParams, attribute: ICommonStyleParams, defaultParams?: ICommonStyleParams): void;
+    setStrokeStyle(params: ISetStrokeStyleParams, attribute: IStrokeStyleParams, offsetX: number, offsetY: number, defaultParams?: IStrokeStyleParams | IStrokeStyleParams[]): void;
+    protected _setStrokeStyle(params: ISetStrokeStyleParams, attribute: IStrokeStyleParams, offsetX: number, offsetY: number, defaultParams?: IStrokeStyleParams): void;
+    setTextStyleWithoutAlignBaseline(params: Partial<ITextStyleParams>, defaultParams?: ITextStyleParams, z?: number): void;
+    setTextStyle(params: Partial<ITextStyleParams>, defaultParams?: ITextStyleParams, z?: number): void;
+    draw(): void;
+    clearMatrix(setTransform?: boolean, dpr?: number): void;
+    onlyTranslate(dpr?: number): boolean;
+    release(...params: any): void;
+}

package/es/canvas/contributions/browser/context.js

@@ -0,0 +1,490 @@
+var __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 { Matrix, pi, pi2 } from "@visactor/vutils";
+
+import { injectable, DefaultFillStyle, DefaultStrokeStyle, DefaultTextStyle, createColor, getScaledStroke, application, matrixAllocate, transformMat4, getContextFont, createConicalGradient } from "@visactor/vrender-core";
+
+const outP = [ 0, 0, 0 ], initMatrix = new Matrix(1, 0, 0, 1, 0, 0), addArcToBezierPath = (bezierPath, startAngle, endAngle, cx, cy, rx, ry, clockwise) => {
+    if (clockwise) for (;endAngle > startAngle; ) endAngle -= pi2; else for (;endAngle < startAngle; ) endAngle += pi2;
+    const step = pi / 3 * (endAngle > startAngle ? 1 : -1);
+    let sa = startAngle, ea = sa;
+    for (;ea !== endAngle; ) {
+        ea = step > 0 ? Math.min(ea + step, endAngle) : Math.max(ea + step, endAngle);
+        const delta = Math.abs(ea - sa), len = 4 * Math.tan(delta / 4) / 3, dir = ea < sa ? -1 : 1, c1 = Math.cos(sa), s1 = Math.sin(sa), c2 = Math.cos(ea), s2 = Math.sin(ea), x1 = c1 * rx + cx, y1 = s1 * ry + cy, x4 = c2 * rx + cx, y4 = s2 * ry + cy, hx = rx * len * dir, hy = ry * len * dir;
+        bezierPath.push([ x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4 ]), 
+        sa = ea;
+    }
+};
+
+let BrowserContext2d = class {
+    set fillStyle(d) {
+        this.nativeContext.fillStyle = d;
+    }
+    get fillStyle() {
+        return this.nativeContext.fillStyle;
+    }
+    set font(d) {
+        this.nativeContext.font = d;
+    }
+    get font() {
+        return this.nativeContext.font;
+    }
+    set globalAlpha(d) {
+        this.nativeContext.globalAlpha = d;
+    }
+    get globalAlpha() {
+        return this.nativeContext.globalAlpha;
+    }
+    set lineCap(d) {
+        this.nativeContext.lineCap = d;
+    }
+    get lineCap() {
+        return this.nativeContext.lineCap;
+    }
+    set lineDashOffset(d) {
+        this.nativeContext.lineDashOffset = d;
+    }
+    get lineDashOffset() {
+        return this.nativeContext.lineDashOffset;
+    }
+    set lineJoin(d) {
+        this.nativeContext.lineJoin = d;
+    }
+    get lineJoin() {
+        return this.nativeContext.lineJoin;
+    }
+    set lineWidth(d) {
+        this.nativeContext.lineWidth = d;
+    }
+    get lineWidth() {
+        return this.nativeContext.lineWidth;
+    }
+    set miterLimit(d) {
+        this.nativeContext.miterLimit = d;
+    }
+    get miterLimit() {
+        return this.nativeContext.miterLimit;
+    }
+    set shadowBlur(d) {
+        this.nativeContext.shadowBlur = d;
+    }
+    get shadowBlur() {
+        return this.nativeContext.shadowBlur;
+    }
+    set shadowColor(d) {
+        this.nativeContext.shadowColor = d;
+    }
+    get shadowColor() {
+        return this.nativeContext.shadowColor;
+    }
+    set shadowOffsetX(d) {
+        this.nativeContext.shadowOffsetX = d;
+    }
+    get shadowOffsetX() {
+        return this.nativeContext.shadowOffsetX;
+    }
+    set shadowOffsetY(d) {
+        this.nativeContext.shadowOffsetY = d;
+    }
+    get shadowOffsetY() {
+        return this.nativeContext.shadowOffsetY;
+    }
+    set strokeStyle(d) {
+        this.nativeContext.strokeStyle = d;
+    }
+    get strokeStyle() {
+        return this.nativeContext.strokeStyle;
+    }
+    set textAlign(d) {
+        this.nativeContext.textAlign = d;
+    }
+    get textAlign() {
+        return this.nativeContext.textAlign;
+    }
+    set textBaseline(d) {
+        this.nativeContext.textBaseline = d;
+    }
+    get textBaseline() {
+        return this.nativeContext.textBaseline;
+    }
+    get inuse() {
+        return !!this._inuse;
+    }
+    set inuse(use) {
+        use !== !!this._inuse && (this._inuse = use, use ? (this.nativeContext.save(), this.reset()) : this.nativeContext.restore());
+    }
+    constructor(canvas, dpr) {
+        this.fillAttributes = Object.assign(Object.assign({}, DefaultFillStyle), {
+            opacity: 1
+        }), this.strokeAttributes = Object.assign(Object.assign({}, DefaultStrokeStyle), {
+            opacity: 1
+        }), this.textAttributes = Object.assign(Object.assign({}, DefaultTextStyle), {
+            opacity: 1
+        }), this._clearShadowStyle = !1, this._clearFilterStyle = !1, this._clearGlobalCompositeOperationStyle = !1;
+        const context = canvas.nativeCanvas.getContext("2d");
+        if (!context) throw new Error("发生错误，获取2d上下文失败");
+        this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), 
+        this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0);
+    }
+    reset() {
+        this.stack.length && console.warn("可能存在bug，matrix没有清空"), this.matrix.setValue(1, 0, 0, 1, 0, 0), 
+        this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack.length = 0, this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
+    }
+    getCanvas() {
+        return this.canvas;
+    }
+    getContext() {
+        return this.nativeContext;
+    }
+    setTransformForCurrent(force = !1) {
+        !force && this.applyedMatrix.equalToMatrix(this.matrix) || (this.applyedMatrix.setValue(this.matrix.a, this.matrix.b, this.matrix.c, this.matrix.d, this.matrix.e, this.matrix.f), 
+        this.nativeContext.setTransform(this.matrix.a, this.matrix.b, this.matrix.c, this.matrix.d, this.matrix.e, this.matrix.f));
+    }
+    get currentMatrix() {
+        return this.matrix;
+    }
+    cloneMatrix(m) {
+        return matrixAllocate.allocateByObj(m);
+    }
+    clear() {
+        this.save(), this.resetTransform(), this.nativeContext.clearRect(0, 0, this.canvas.width, this.canvas.height), 
+        this.restore();
+    }
+    restore() {
+        this.nativeContext.restore(), this.stack.length > 0 && (matrixAllocate.free(this.matrix), 
+        this.matrix = this.stack.pop(), this.setTransformForCurrent(!0));
+    }
+    highPerformanceRestore() {
+        this.stack.length > 0 && (matrixAllocate.free(this.matrix), this.matrix = this.stack.pop());
+    }
+    rotate(rad, setTransform = !0) {
+        this.matrix.rotate(rad), setTransform && this.setTransformForCurrent();
+    }
+    save() {
+        const matrix = this.cloneMatrix(this.matrix);
+        this.stack.push(matrix), this.nativeContext.save();
+    }
+    highPerformanceSave() {
+        const matrix = this.cloneMatrix(this.matrix);
+        this.stack.push(matrix);
+    }
+    scale(sx, sy, setTransform = !0) {
+        this.matrix.scale(sx, sy), setTransform && this.setTransformForCurrent();
+    }
+    setScale(sx, sy, setTransform = !0) {
+        this.matrix.setScale(sx, sy), setTransform && this.setTransformForCurrent();
+    }
+    scalePoint(sx, sy, px, py, setTransform = !0) {
+        this.translate(px, py, !1), this.scale(sx, sy, !1), this.translate(-px, -py, !1), 
+        setTransform && this.setTransformForCurrent();
+    }
+    setTransform(a, b, c, d, e, f, setTransform = !0, dpr = this.dpr) {
+        this.matrix.setValue(dpr * a, dpr * b, dpr * c, dpr * d, dpr * e, dpr * f), setTransform && this.setTransformForCurrent();
+    }
+    setTransformFromMatrix(matrix, setTransform = !0, dpr = this.dpr) {
+        this.matrix.setValue(matrix.a * dpr, matrix.b * dpr, matrix.c * dpr, matrix.d * dpr, matrix.e * dpr, matrix.f * dpr), 
+        setTransform && this.setTransformForCurrent();
+    }
+    resetTransform(setTransform = !0, dpr = this.dpr) {
+        this.setTransform(dpr, 0, 0, dpr, 0, 0), setTransform && this.setTransformForCurrent();
+    }
+    transform(a, b, c, d, e, f, setTransform = !0) {
+        this.matrix.multiply(a, b, c, d, e, f), setTransform && this.setTransformForCurrent();
+    }
+    transformFromMatrix(matrix, setTransform) {
+        this.matrix.multiply(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f), 
+        setTransform && this.setTransformForCurrent();
+    }
+    translate(x, y, setTransform = !0) {
+        this.matrix.translate(x, y), setTransform && this.setTransformForCurrent();
+    }
+    rotateDegrees(deg, setTransform = !0) {
+        const rad = deg * Math.PI / 180;
+        this.rotate(rad, setTransform);
+    }
+    rotateAbout(rad, x, y, setTransform = !0) {
+        this.translate(x, y, !1), this.rotate(rad, !1), this.translate(-x, -y, !1), setTransform && this.setTransformForCurrent();
+    }
+    rotateDegreesAbout(deg, x, y, setTransform = !0) {
+        this.translate(x, y, !1), this.rotateDegrees(deg, !1), this.translate(-x, -y, !1), 
+        setTransform && this.setTransformForCurrent();
+    }
+    beginPath() {
+        this.disableBeginPath || this.nativeContext.beginPath();
+    }
+    clip(path, fillRule) {
+        path ? "string" == typeof path ? this.nativeContext.clip(path) : this.nativeContext.clip(path, fillRule) : this.nativeContext.clip();
+    }
+    arc(x, y, radius, startAngle, endAngle, anticlockwise, z) {
+        if (z = z || 0, this.camera) {
+            const arr = [];
+            addArcToBezierPath(arr, startAngle, endAngle, x, y, radius, radius, anticlockwise);
+            for (let i = 0; i < arr.length; ++i) {
+                const bez = arr[i];
+                this.bezierCurveTo(bez[0], bez[1], bez[2], bez[3], bez[4], bez[5], z);
+            }
+        } else this.nativeContext.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+    }
+    arcTo(x1, y1, x2, y2, radiusX) {
+        this.nativeContext.arcTo(x1, y1, x2, y2, radiusX);
+    }
+    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, z) {
+        if (z = z || 0, this.camera) {
+            let cp1z = z, cp2z = z;
+            this.modelMatrix && (transformMat4(outP, [ cp1x, cp1y, z ], this.modelMatrix), cp1x = outP[0], 
+            cp1y = outP[1], cp1z = outP[2], transformMat4(outP, [ cp2x, cp2y, z ], this.modelMatrix), 
+            cp2x = outP[0], cp2y = outP[1], cp2z = outP[2], transformMat4(outP, [ x, y, z ], this.modelMatrix), 
+            x = outP[0], y = outP[1], z = outP[2]);
+            let data = this.camera.vp(x, y, z);
+            x = data.x, y = data.y, data = this.camera.vp(cp1x, cp1y, cp1z), cp1x = data.x, 
+            cp1y = data.y, data = this.camera.vp(cp2x, cp2y, cp2z), cp2x = data.x, cp2y = data.y;
+        }
+        this.nativeContext.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+    }
+    closePath() {
+        this.nativeContext.closePath();
+    }
+    ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
+        null == anticlockwise ? this.nativeContext.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle) : this.nativeContext.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+    }
+    lineTo(x, y, z) {
+        if (z = z || 0, this.camera) {
+            this.modelMatrix && (transformMat4(outP, [ x, y, z ], this.modelMatrix), x = outP[0], 
+            y = outP[1], z = outP[2]);
+            const data = this.camera.vp(x, y, z);
+            x = data.x, y = data.y;
+        }
+        this.nativeContext.lineTo(x, y);
+    }
+    moveTo(x, y, z) {
+        if (z = z || 0, this.camera) {
+            this.modelMatrix && (transformMat4(outP, [ x, y, z ], this.modelMatrix), x = outP[0], 
+            y = outP[1], z = outP[2]);
+            const data = this.camera.vp(x, y, z);
+            x = data.x, y = data.y;
+        }
+        this.nativeContext.moveTo(x, y);
+    }
+    quadraticCurveTo(cpx, cpy, x, y, z) {
+        if (z = z || 0, this.camera) {
+            let cpz = z;
+            this.modelMatrix && (transformMat4(outP, [ cpx, cpy, z ], this.modelMatrix), cpx = outP[0], 
+            cpy = outP[1], cpz = outP[2], transformMat4(outP, [ x, y, z ], this.modelMatrix), 
+            x = outP[0], y = outP[1], z = outP[2]);
+            let data = this.camera.vp(x, y, z);
+            x = data.x, y = data.y, data = this.camera.vp(cpx, cpy, cpz), cpx = data.x, cpy = data.y;
+        }
+        this.nativeContext.quadraticCurveTo(cpx, cpy, x, y);
+    }
+    rect(x, y, w, h, z) {
+        z = z || 0, this.camera ? (this.moveTo(x, y, z), this.lineTo(x + w, y, z), this.lineTo(x + w, y + h, z), 
+        this.lineTo(x, y + h, z), this.closePath()) : this.nativeContext.rect(x, y, w, h);
+    }
+    createImageData() {
+        const a = arguments;
+        return 2 === a.length ? this.nativeContext.createImageData(a[0], a[1]) : 1 === a.length ? this.nativeContext.createImageData(a[0]) : null;
+    }
+    createLinearGradient(x0, y0, x1, y1) {
+        return this.nativeContext.createLinearGradient(x0, y0, x1, y1);
+    }
+    createPattern(image, repetition) {
+        return 0 === image.width || 0 === image.height ? null : this.nativeContext.createPattern(image, repetition);
+    }
+    createRadialGradient(x0, y0, r0, x1, y1, r1) {
+        return this.nativeContext.createRadialGradient(x0, y0, r0, x1, y1, r1);
+    }
+    createConicGradient(x, y, startAngle, endAngle) {
+        let pattern, edit = !1;
+        const ctx = this;
+        return {
+            stops: [],
+            addColorStop(offset, color) {
+                this.stops.push([ offset, color ]), edit = !0;
+            },
+            GetPattern(minW, minH, deltaAngle) {
+                return edit && (deltaAngle || (deltaAngle = endAngle - startAngle), pattern = createConicalGradient(ctx, this.stops, x, y, deltaAngle, startAngle, endAngle, minW, minH), 
+                edit = !1), pattern;
+            }
+        };
+    }
+    fill(path, fillRule) {
+        this.disableFill || (path ? this.nativeContext.fill(path) : this.nativeContext.fill());
+    }
+    fillRect(x, y, width, height) {
+        this.nativeContext.fillRect(x, y, width, height);
+    }
+    clearRect(x, y, w, h) {
+        this.nativeContext.clearRect(x, y, w, h);
+    }
+    project(x, y, z) {
+        if (z = z || 0, this.camera) {
+            this.modelMatrix && (transformMat4(outP, [ x, y, z ], this.modelMatrix), x = outP[0], 
+            y = outP[1], z = outP[2]);
+            const data = this.camera.vp(x, y, z);
+            x = data.x, y = data.y;
+        }
+        return {
+            x: x,
+            y: y
+        };
+    }
+    view(x, y, z) {
+        return z = z || 0, this.camera ? (this.modelMatrix && (transformMat4(outP, [ x, y, z ], this.modelMatrix), 
+        x = outP[0], y = outP[1], z = outP[2]), this.camera.view(x, y, z)) : [ x, y, z ];
+    }
+    fillText(text, x, y, z) {
+        if (z = z || 0, this.camera) {
+            this.modelMatrix && (transformMat4(outP, [ x, y, z ], this.modelMatrix), x = outP[0], 
+            y = outP[1], z = outP[2]);
+            const data = this.camera.vp(x, y, z);
+            x = data.x, y = data.y;
+        }
+        this.nativeContext.fillText(text, x, y);
+    }
+    getImageData(sx, sy, sw, sh) {
+        return this.nativeContext.getImageData(sx, sy, sw, sh);
+    }
+    getLineDash() {
+        return this.nativeContext.getLineDash();
+    }
+    isPointInPath(x, y) {
+        return this.nativeContext.isPointInPath(x, y);
+    }
+    isPointInStroke(x, y) {
+        return this.nativeContext.isPointInStroke(x, y);
+    }
+    measureText(text, method = application.global.measureTextMethod) {
+        var _a, _b;
+        return method && "native" !== method ? (this.mathTextMeasure || (this.mathTextMeasure = application.graphicUtil.createTextMeasureInstance({}, {}, (() => this.canvas))), 
+        this.mathTextMeasure.textSpec.fontFamily = null !== (_a = this.fontFamily) && void 0 !== _a ? _a : DefaultTextStyle.fontFamily, 
+        this.mathTextMeasure.textSpec.fontSize = null !== (_b = this.fontSize) && void 0 !== _b ? _b : DefaultTextStyle.fontSize, 
+        this.mathTextMeasure._numberCharSize = null, this.mathTextMeasure._fullCharSize = null, 
+        this.mathTextMeasure._letterCharSize = null, this.mathTextMeasure._specialCharSizeMap = {}, 
+        this.mathTextMeasure.measure(text, method)) : this.nativeContext.measureText(text);
+    }
+    putImageData(imagedata, dx, dy) {
+        this.nativeContext.putImageData(imagedata, dx, dy);
+    }
+    setLineDash(segments) {
+        const a = arguments, _context = this.nativeContext;
+        this.nativeContext.setLineDash ? _context.setLineDash(a[0]) : "mozDash" in _context ? _context.mozDash = a[0] : "webkitLineDash" in _context && (_context.webkitLineDash = a[0]);
+    }
+    stroke(path) {
+        this.disableStroke || (path ? this.nativeContext.stroke(path) : this.nativeContext.stroke());
+    }
+    strokeRect(x, y, width, height) {
+        this.nativeContext.strokeRect(x, y, width, height);
+    }
+    strokeText(text, x, y, z) {
+        if (z = z || 0, this.camera) {
+            this.modelMatrix && (transformMat4(outP, [ x, y, z ], this.modelMatrix), x = outP[0], 
+            y = outP[1], z = outP[2]);
+            const data = this.camera.vp(x, y, z);
+            x = data.x, y = data.y;
+        }
+        this.nativeContext.strokeText(text, x, y);
+    }
+    drawImage() {
+        const _context = this.nativeContext, a = arguments;
+        3 === a.length ? _context.drawImage(a[0], a[1], a[2]) : 5 === a.length ? _context.drawImage(a[0], a[1], a[2], a[3], a[4]) : 9 === a.length && _context.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8]);
+    }
+    setCommonStyle(params, attribute, offsetX, offsetY, defaultParams) {
+        if (Array.isArray(defaultParams)) {
+            if (defaultParams.length <= 1) return this._setCommonStyle(params, attribute, offsetX, offsetY, defaultParams[0]);
+            const dp = {};
+            return defaultParams.forEach((p => {
+                Object.assign(dp, p);
+            })), this._setCommonStyle(params, attribute, offsetX, offsetY, dp);
+        }
+        return this._setCommonStyle(params, attribute, offsetX, offsetY, defaultParams);
+    }
+    _setCommonStyle(params, attribute, offsetX, offsetY, defaultParams) {
+        const _context = this.nativeContext;
+        defaultParams || (defaultParams = this.fillAttributes);
+        const {fillOpacity: fillOpacity = defaultParams.fillOpacity, opacity: opacity = defaultParams.opacity, fill: fill = defaultParams.fill} = attribute;
+        fillOpacity > 1e-12 && opacity > 1e-12 ? (_context.globalAlpha = fillOpacity * opacity, 
+        _context.fillStyle = createColor(this, fill, params, offsetX, offsetY)) : _context.globalAlpha = fillOpacity * opacity;
+    }
+    setShadowBlendStyle(params, attribute, defaultParams) {
+        if (Array.isArray(defaultParams)) {
+            if (defaultParams.length <= 1) return this._setShadowBlendStyle(params, defaultParams[0]);
+            const dp = {};
+            return defaultParams.forEach((p => {
+                Object.assign(dp, p);
+            })), this._setShadowBlendStyle(params, attribute, dp);
+        }
+        return this._setShadowBlendStyle(params, attribute, defaultParams);
+    }
+    _setShadowBlendStyle(params, attribute, defaultParams) {
+        const _context = this.nativeContext;
+        defaultParams || (defaultParams = this.fillAttributes);
+        const {opacity: opacity = defaultParams.opacity, shadowBlur: shadowBlur = defaultParams.shadowBlur, shadowColor: shadowColor = defaultParams.shadowColor, shadowOffsetX: shadowOffsetX = defaultParams.shadowOffsetX, shadowOffsetY: shadowOffsetY = defaultParams.shadowOffsetY, blur: blur = defaultParams.blur, globalCompositeOperation: globalCompositeOperation = defaultParams.globalCompositeOperation} = attribute;
+        opacity <= 1e-12 || (shadowBlur || shadowOffsetX || shadowOffsetY ? (_context.shadowBlur = shadowBlur, 
+        _context.shadowColor = shadowColor, _context.shadowOffsetX = shadowOffsetX, _context.shadowOffsetY = shadowOffsetY, 
+        this._clearShadowStyle = !0) : this._clearShadowStyle && (_context.shadowBlur = 0, 
+        _context.shadowOffsetX = 0, _context.shadowOffsetY = 0), blur ? (_context.filter = `blur(${blur}px)`, 
+        this._clearFilterStyle = !0) : this._clearFilterStyle && (_context.filter = "blur(0px)", 
+        this._clearFilterStyle = !1), globalCompositeOperation ? (_context.globalCompositeOperation = globalCompositeOperation, 
+        this._clearGlobalCompositeOperationStyle = !0) : this._clearGlobalCompositeOperationStyle && (_context.globalCompositeOperation = "source-over", 
+        this._clearGlobalCompositeOperationStyle = !1));
+    }
+    setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {
+        if (Array.isArray(defaultParams)) {
+            if (defaultParams.length <= 1) return this._setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams[0]);
+            const dp = {};
+            return defaultParams.forEach((p => {
+                Object.assign(dp, p);
+            })), this._setStrokeStyle(params, attribute, offsetX, offsetY, dp);
+        }
+        return this._setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams);
+    }
+    _setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {
+        const _context = this.nativeContext;
+        defaultParams || (defaultParams = this.strokeAttributes);
+        const {strokeOpacity: strokeOpacity = defaultParams.strokeOpacity, opacity: opacity = defaultParams.opacity} = attribute;
+        if (strokeOpacity > 1e-12 && opacity > 1e-12) {
+            const {lineWidth: lineWidth = defaultParams.lineWidth, stroke: stroke = defaultParams.stroke, lineJoin: lineJoin = defaultParams.lineJoin, lineDash: lineDash = defaultParams.lineDash, lineCap: lineCap = defaultParams.lineCap, miterLimit: miterLimit = defaultParams.miterLimit} = attribute;
+            _context.globalAlpha = strokeOpacity * opacity, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), 
+            _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 
+            _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+        }
+    }
+    setTextStyleWithoutAlignBaseline(params, defaultParams, z) {
+        const _context = this.nativeContext;
+        defaultParams || (defaultParams = this.textAttributes);
+        const {scaleIn3d: scaleIn3d = defaultParams.scaleIn3d} = params;
+        params.font ? _context.font = params.font : _context.font = getContextFont(params, defaultParams, scaleIn3d && this.camera && this.camera.getProjectionScale(z));
+        const {fontFamily: fontFamily = defaultParams.fontFamily, fontSize: fontSize = defaultParams.fontSize} = params;
+        this.fontFamily = fontFamily, this.fontSize = fontSize, _context.textAlign = "left", 
+        _context.textBaseline = "alphabetic";
+    }
+    setTextStyle(params, defaultParams, z) {
+        var _a, _b;
+        const _context = this.nativeContext;
+        defaultParams || (defaultParams = this.textAttributes), params.font ? _context.font = params.font : _context.font = getContextFont(params, defaultParams, this.camera && this.camera.getProjectionScale(z));
+        const {fontFamily: fontFamily = defaultParams.fontFamily, fontSize: fontSize = defaultParams.fontSize} = params;
+        this.fontFamily = fontFamily, this.fontSize = fontSize, _context.textAlign = null !== (_a = params.textAlign) && void 0 !== _a ? _a : defaultParams.textAlign, 
+        _context.textBaseline = null !== (_b = params.textBaseline) && void 0 !== _b ? _b : defaultParams.textBaseline;
+    }
+    draw() {}
+    clearMatrix(setTransform = !0, dpr = this.dpr) {
+        this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+    }
+    onlyTranslate(dpr = this.dpr) {
+        return this.matrix.a === dpr && 0 === this.matrix.b && 0 === this.matrix.c && this.matrix.d === dpr;
+    }
+    release(...params) {
+        this.stack.forEach((m => matrixAllocate.free(m))), this.stack.length = 0;
+    }
+};
+
+BrowserContext2d.env = "browser", BrowserContext2d = __decorate([ injectable(), __metadata("design:paramtypes", [ Object, Number ]) ], BrowserContext2d);
+
+export { BrowserContext2d };
+//# sourceMappingURL=context.js.map