@antv/g/es/services/RenderingService.js

import { __awaiter, __decorate, __generator, __metadata } from "tslib";
import { inject, singleton, contrib, Syringe, Contribution } from 'mana-syringe'; // import { SyncHook, SyncWaterfallHook, AsyncParallelHook, AsyncSeriesWaterfallHook } from '../utils';

import { SyncHook, SyncWaterfallHook, AsyncParallelHook, AsyncSeriesWaterfallHook } from 'tapable';
import { StyleValueRegistry } from '../css/interfaces';
import { ElementEvent } from '../dom';
import { RenderingContext, RenderReason } from './RenderingContext';
import { SceneGraphService, sortByZIndex } from './SceneGraphService';
export var RenderingPluginContribution = Syringe.defineToken('RenderingPluginContribution');
/**
 * Use frame renderer implemented by `g-canvas/svg/webgl`, in every frame we do followings:
 * * update & merge dirty rectangles
 * * begin frame
 * * filter by visible
 * * sort by z-index in scene graph
 * * culling with strategies registered in `g-canvas/webgl`
 * * end frame
 */

var RenderingService =
/** @class */
function () {
  function RenderingService() {
    this.inited = false;
    this.stats = {
      /**
       * total display objects in scenegraph
       */
      total: 0,

      /**
       * number of display objects need to render in current frame
       */
      rendered: 0,

      /**
       * number of display objects displayed on screen
       */
      renderedOnscreen: 0
    };
    this.zIndexCounter = 0;
    this.hooks = {
      /**
       * called before any frame rendered
       */
      init: new AsyncParallelHook(),

      /**
       * only dirty object which has sth changed will be rendered
       */
      dirtycheck: new SyncWaterfallHook(['object']),

      /**
       * do culling
       */
      cull: new SyncWaterfallHook(['object']),

      /**
       * called at beginning of each frame, won't get called if nothing to re-render
       */
      beginFrame: new SyncHook([]),

      /**
       * called before every dirty object get rendered
       */
      beforeRender: new SyncHook(['objectToRender']),

      /**
       * called when every dirty object rendering even it's culled
       */
      render: new SyncHook(['objectToRender']),

      /**
       * called after every dirty object get rendered
       */
      afterRender: new SyncHook(['objectToRender']),
      endFrame: new SyncHook([]),
      destroy: new SyncHook([]),

      /**
       * use async but faster method such as GPU-based picking in `g-plugin-device-renderer`
       */
      pick: new AsyncSeriesWaterfallHook(['result']),

      /**
       * used in event system
       */
      pointerDown: new SyncHook(['event']),
      pointerUp: new SyncHook(['event']),
      pointerMove: new SyncHook(['event']),
      pointerOut: new SyncHook(['event']),
      pointerOver: new SyncHook(['event']),
      pointerWheel: new SyncHook(['event']),
      pointerCancel: new SyncHook(['event'])
    };
  }

  RenderingService.prototype.init = function () {
    return __awaiter(this, void 0, void 0, function () {
      var _this = this;

      return __generator(this, function (_a) {
        switch (_a.label) {
          case 0:
            // register rendering plugins
            this.renderingPluginProvider.getContributions({
              cache: false
            }).forEach(function (plugin) {
              plugin.apply(_this);
            }); // await this.hooks.init.callPromise();

            return [4
            /*yield*/
            , this.hooks.init.promise()];

          case 1:
            // await this.hooks.init.callPromise();
            _a.sent();

            this.inited = true;
            return [2
            /*return*/
            ];
        }
      });
    });
  };

  RenderingService.prototype.getStats = function () {
    return this.stats;
  };

  RenderingService.prototype.render = function (canvasConfig) {
    this.stats.total = 0;
    this.stats.rendered = 0;
    this.zIndexCounter = 0;
    this.sceneGraphService.syncHierarchy(this.renderingContext.root);

    if (this.renderingContext.renderReasons.size && this.inited) {
      this.renderDisplayObject(this.renderingContext.root);

      if (this.renderingContext.dirty || canvasConfig.renderer.getConfig().enableDirtyRectangleRendering && this.stats.total === 1) {
        if (!this.renderingContext.dirty) {
          this.hooks.beginFrame.call();
        }

        this.stats.renderedOnscreen = this.stats.rendered;
        this.hooks.endFrame.call();
        this.renderingContext.dirty = false;
      }

      this.renderingContext.renderReasons.clear();
    } // console.log('stats', this.stats);

  };

  RenderingService.prototype.renderDisplayObject = function (displayObject) {
    var _this = this; // recalc style values


    this.styleValueRegistry.recalc(displayObject); // TODO: relayout
    // dirtycheck first

    var objectChanged = this.hooks.dirtycheck.call(displayObject);

    if (objectChanged) {
      // const objectToRender = this.hooks.cull.call(objectChanged);
      this.hooks.cull.call(objectChanged); // if (objectToRender) {

      this.stats.rendered++;

      if (!this.renderingContext.dirty) {
        this.renderingContext.dirty = true;
        this.hooks.beginFrame.call();
      }

      this.hooks.beforeRender.call(objectChanged);
      this.hooks.render.call(objectChanged);
      this.hooks.afterRender.call(objectChanged);
      displayObject.renderable.dirty = false; // }
    }

    displayObject.sortable.renderOrder = this.zIndexCounter++;
    this.stats.total++; // sort is very expensive, use cached result if posible

    var sortable = displayObject.sortable;
    var renderOrderChanged = false;

    if (sortable.dirty) {
      sortable.sorted = displayObject.childNodes.slice().sort(sortByZIndex);
      renderOrderChanged = true;
      sortable.dirty = false;
    } // recursive rendering its children


    (sortable.sorted || displayObject.childNodes).forEach(function (child) {
      _this.renderDisplayObject(child);
    });

    if (renderOrderChanged) {
      displayObject.forEach(function (child) {
        child.emit(ElementEvent.RENDER_ORDER_CHANGED, {
          renderOrder: child.sortable.renderOrder
        });
      });
    }
  };

  RenderingService.prototype.destroy = function () {
    this.inited = false;
    this.hooks.destroy.call();
  };

  RenderingService.prototype.dirtify = function () {
    // need re-render
    this.renderingContext.renderReasons.add(RenderReason.DISPLAY_OBJECT_CHANGED);
  };

  __decorate([contrib(RenderingPluginContribution), __metadata("design:type", Object)], RenderingService.prototype, "renderingPluginProvider", void 0);

  __decorate([inject(RenderingContext), __metadata("design:type", Object)], RenderingService.prototype, "renderingContext", void 0);

  __decorate([inject(SceneGraphService), __metadata("design:type", Object)], RenderingService.prototype, "sceneGraphService", void 0);

  __decorate([inject(StyleValueRegistry), __metadata("design:type", Object)], RenderingService.prototype, "styleValueRegistry", void 0);

  RenderingService = __decorate([singleton()], RenderingService);
  return RenderingService;
}();

export { RenderingService };