@visactor/vgrammar-core/es/graph/canvas-renderer.js

VGrammar is a visual grammar library

import { isObject } from "@visactor/vutils";

import { createStage, waitForAllSubLayers } from "@visactor/vrender-core";

import { HOOK_EVENT } from "./enums";

import { Factory } from "../core/factory";

export default class CanvasRenderer {
    constructor(view) {
        this.handleAfterNextRender = () => {
            this._stage && !this._viewOptions.disableDirtyBounds && this._stage.enableDirtyBounds(), 
            this._view.emit(HOOK_EVENT.AFTER_VRENDER_DRAW), this._view.emit(HOOK_EVENT.AFTER_VRENDER_NEXT_RENDER);
        }, this._view = view;
    }
    initialize(width, height, options, eventConfig) {
        return this._width = width, this._height = height, this._viewOptions = options, 
        this._eventConfig = eventConfig, this.initStage(), this;
    }
    stage() {
        var _a;
        return null !== (_a = this._stage) && void 0 !== _a ? _a : null;
    }
    gestureController() {
        var _a;
        return null !== (_a = this._gestureController) && void 0 !== _a ? _a : null;
    }
    canvas() {
        return this._stage ? this._stage.window.getNativeHandler().nativeCanvas : null;
    }
    context() {
        return this._stage ? this._stage.window.getContext().nativeContext : null;
    }
    combineIncrementalLayers() {
        return this._stage && waitForAllSubLayers(this._stage).then((() => {
            this._stage && this._stage.defaultLayer.combineSubLayer();
        })), this;
    }
    background(color) {
        if (this._stage) return this._stage.background = color, this;
    }
    setDpr(resolution, redraw) {
        var _a, _b;
        return null === (_b = null === (_a = this._stage) || void 0 === _a ? void 0 : _a.setDpr) || void 0 === _b || _b.call(_a, resolution), 
        redraw && this.renderNextFrame(), this;
    }
    shouldResize(width, height) {
        return width !== this._width || height !== this._height;
    }
    resize(width, height) {
        return this._view.emit(HOOK_EVENT.BEFORE_STAGE_RESIZE), this.shouldResize(width, height) && (this._width = width, 
        this._height = height, this._stage && this._stage.resize(width, height)), this._view.emit(HOOK_EVENT.AFTER_STAGE_RESIZE), 
        this;
    }
    setViewBox(viewBox, rerender = !0) {
        return this._stage ? (!viewBox || this._viewBox && viewBox.x1 === this._viewBox.x1 && viewBox.x2 === this._viewBox.x2 && viewBox.y1 === this._viewBox.y1 && viewBox.y2 === this._viewBox.y2 || (this._viewBox = viewBox, 
        this._stage.setViewBox(viewBox.x1, viewBox.y1, viewBox.x2 - viewBox.x1, viewBox.y2 - viewBox.y1, rerender)), 
        this) : this;
    }
    render(immediately = !1) {
        return this._view.emit(HOOK_EVENT.BEFORE_VRENDER_DRAW), this.initStage(), this._stage.disableDirtyBounds(), 
        this._stage.afterNextRender(this.handleAfterNextRender), immediately && (this._stage.render(), 
        this._view.emit(HOOK_EVENT.AFTER_VRENDER_DRAW)), this;
    }
    renderNextFrame() {
        return this.initStage(), this._stage.renderNextFrame(), this;
    }
    toCanvas() {
        return this._stage ? this._stage.toCanvas() : null;
    }
    preventRender(tag) {
        this._stage && this._stage.preventRender(tag);
    }
    release() {
        var _a;
        this._view.traverseMarkTree((mark => {
            mark.release();
        })), this._dragController && this._dragController.release(), this._gestureController && this._gestureController.release(), 
        this._stage !== (null === (_a = this._viewOptions) || void 0 === _a ? void 0 : _a.stage) && this._stage.release(), 
        this._stage = null, this._layer = null, this._dragController = null, this._gestureController = null;
    }
    createStage() {
        var _a, _b, _c, _d, _e;
        this._view.emit(HOOK_EVENT.BEFORE_CREATE_VRENDER_STAGE);
        const viewOptions = this._viewOptions, stage = null !== (_a = viewOptions.stage) && void 0 !== _a ? _a : createStage({
            width: this._width,
            height: this._height,
            renderStyle: viewOptions.renderStyle,
            viewBox: viewOptions.viewBox,
            dpr: viewOptions.dpr,
            canvas: viewOptions.renderCanvas,
            canvasControled: viewOptions.canvasControled,
            container: viewOptions.container,
            title: viewOptions.rendererTitle,
            beforeRender: viewOptions.beforeRender,
            afterRender: viewOptions.afterRender,
            disableDirtyBounds: !0,
            autoRender: !0,
            pluginList: viewOptions.pluginList,
            enableHtmlAttribute: viewOptions.enableHtmlAttribute,
            optimize: viewOptions.optimize,
            ticker: viewOptions.ticker,
            supportsTouchEvents: viewOptions.supportsTouchEvents,
            supportsPointerEvents: viewOptions.supportsPointerEvents,
            event: {
                clickInterval: this._eventConfig.clickInterval,
                autoPreventDefault: !!this._eventConfig.autoPreventDefault
            },
            ReactDOM: viewOptions.ReactDOM,
            autoRefresh: viewOptions.autoRefresh
        });
        (null === (_b = viewOptions.options3d) || void 0 === _b ? void 0 : _b.enable) && stage.set3dOptions(viewOptions.options3d), 
        stage.enableIncrementalAutoRender(), this._viewBox = viewOptions.viewBox, this._view.emit(HOOK_EVENT.AFTER_CREATE_VRENDER_STAGE), 
        this._view.emit(HOOK_EVENT.BEFORE_CREATE_VRENDER_LAYER);
        const layer = null !== (_c = viewOptions.layer) && void 0 !== _c ? _c : stage.defaultLayer;
        if (this._view.emit(HOOK_EVENT.AFTER_CREATE_VRENDER_LAYER), (null === (_d = this._eventConfig) || void 0 === _d ? void 0 : _d.drag) && Factory.getStageEventPlugin("drag") && (this._dragController = new (Factory.getStageEventPlugin("drag"))(stage)), 
        (null === (_e = this._eventConfig) || void 0 === _e ? void 0 : _e.gesture) && Factory.getStageEventPlugin("gesture")) {
            const gestureConfig = isObject(this._eventConfig.gesture) ? this._eventConfig.gesture : {};
            this._gestureController = new (Factory.getStageEventPlugin("gesture"))(stage, gestureConfig);
        }
        return {
            stage: stage,
            layer: layer
        };
    }
    initStage() {
        if (!this._stage) {
            const {stage: stage, layer: layer} = this.createStage();
            this._stage = stage, this._layer = layer;
            const background = this._view.background();
            this.background(background);
        }
    }
}
//# sourceMappingURL=canvas-renderer.js.map