You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

202 lines
6.8 KiB

/*!
* @antv/g-canvas
* @description A renderer implemented by Canvas 2D API
* @version 2.0.48
* @date 7/30/2025, 1:38:18 PM
* @author AntVis
* @docs https://g.antv.antgroup.com/
*/
import _createClass from '@babel/runtime/helpers/createClass';
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
import _callSuper from '@babel/runtime/helpers/callSuper';
import _inherits from '@babel/runtime/helpers/inherits';
import { setDOMSize, RenderReason, AbstractRendererPlugin, AbstractRenderer } from '@antv/g-lite';
import * as CanvasPathGenerator from '@antv/g-plugin-canvas-path-generator';
export { CanvasPathGenerator };
import * as CanvasPicker from '@antv/g-plugin-canvas-picker';
export { CanvasPicker };
import * as CanvasRenderer from '@antv/g-plugin-canvas-renderer';
export { CanvasRenderer };
import * as DomInteraction from '@antv/g-plugin-dom-interaction';
export { DomInteraction };
import * as HTMLRenderer from '@antv/g-plugin-html-renderer';
export { HTMLRenderer };
import * as ImageLoader from '@antv/g-plugin-image-loader';
export { ImageLoader };
import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import { isString } from '@antv/util';
var Canvas2DContextService = /*#__PURE__*/function () {
function Canvas2DContextService(context) {
_classCallCheck(this, Canvas2DContextService);
this.renderingContext = context.renderingContext;
this.canvasConfig = context.config;
}
return _createClass(Canvas2DContextService, [{
key: "init",
value: function init() {
var _this$canvasConfig = this.canvasConfig,
container = _this$canvasConfig.container,
canvas = _this$canvasConfig.canvas;
if (canvas) {
this.$canvas = canvas;
if (container && canvas.parentElement !== container) {
container.appendChild(canvas);
}
this.$container = canvas.parentElement;
this.canvasConfig.container = this.$container;
} else if (container) {
// create container
this.$container = isString(container) ? document.getElementById(container) : container;
if (this.$container) {
// create canvas
var $canvas = document.createElement('canvas');
this.$container.appendChild($canvas);
if (!this.$container.style.position) {
this.$container.style.position = 'relative';
}
this.$canvas = $canvas;
}
}
this.context = this.$canvas.getContext('2d');
this.resize(this.canvasConfig.width, this.canvasConfig.height);
}
}, {
key: "getContext",
value: function getContext() {
return this.context;
}
}, {
key: "getDomElement",
value: function getDomElement() {
return this.$canvas;
}
}, {
key: "getDPR",
value: function getDPR() {
return this.dpr;
}
}, {
key: "getBoundingClientRect",
value: function getBoundingClientRect() {
if (this.$canvas.getBoundingClientRect) {
return this.$canvas.getBoundingClientRect();
}
}
}, {
key: "destroy",
value: function destroy() {
// @ts-ignore
if (this.$container && this.$canvas && this.$canvas.parentNode) {
// destroy context
// @ts-ignore
this.$container.removeChild(this.$canvas);
}
}
}, {
key: "resize",
value: function resize(width, height) {
var dpr = this.canvasConfig.devicePixelRatio;
this.dpr = dpr;
if (this.$canvas) {
// set canvas width & height
this.$canvas.width = this.dpr * width;
this.$canvas.height = this.dpr * height;
// set CSS style width & height
setDOMSize(this.$canvas, width, height);
// const dpr = this.getDPR();
// scale all drawing operations by the dpr
// @see https://www.html5rocks.com/en/tutorials/canvas/hidpi/
// this.context.scale(dpr, dpr);
}
this.renderingContext.renderReasons.add(RenderReason.CAMERA_CHANGED);
}
}, {
key: "applyCursorStyle",
value: function applyCursorStyle(cursor) {
if (this.$container && this.$container.style) {
this.$container.style.cursor = cursor;
}
}
}, {
key: "toDataURL",
value: function () {
var _toDataURL = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var options,
type,
encoderOptions,
_args = arguments;
return _regeneratorRuntime().wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
options = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
type = options.type, encoderOptions = options.encoderOptions;
return _context.abrupt("return", this.context.canvas.toDataURL(type, encoderOptions));
case 1:
case "end":
return _context.stop();
}
}, _callee, this);
}));
function toDataURL() {
return _toDataURL.apply(this, arguments);
}
return toDataURL;
}()
}]);
}();
var ContextRegisterPlugin = /*#__PURE__*/function (_AbstractRendererPlug) {
function ContextRegisterPlugin() {
var _this;
_classCallCheck(this, ContextRegisterPlugin);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, ContextRegisterPlugin, [].concat(args));
_this.name = 'canvas-context-register';
return _this;
}
_inherits(ContextRegisterPlugin, _AbstractRendererPlug);
return _createClass(ContextRegisterPlugin, [{
key: "init",
value: function init() {
this.context.ContextService = Canvas2DContextService;
}
}, {
key: "destroy",
value: function destroy() {
delete this.context.ContextService;
}
}]);
}(AbstractRendererPlugin);
var Renderer = /*#__PURE__*/function (_AbstractRenderer) {
function Renderer(config) {
var _this;
_classCallCheck(this, Renderer);
_this = _callSuper(this, Renderer, [config]);
// register Canvas2DContext
_this.registerPlugin(new ContextRegisterPlugin());
_this.registerPlugin(new ImageLoader.Plugin());
_this.registerPlugin(new CanvasPathGenerator.Plugin());
// enable rendering with Canvas2D API
_this.registerPlugin(new CanvasRenderer.Plugin());
_this.registerPlugin(new DomInteraction.Plugin());
// enable picking with Canvas2D API
_this.registerPlugin(new CanvasPicker.Plugin());
// render HTML component
_this.registerPlugin(new HTMLRenderer.Plugin());
return _this;
}
_inherits(Renderer, _AbstractRenderer);
return _createClass(Renderer);
}(AbstractRenderer);
export { Renderer };
//# sourceMappingURL=index.esm.js.map