@antv/g-mobile-webgl
Version:
A renderer implemented by WebGL1/2 in mobile environment
209 lines (200 loc) • 7.65 kB
JavaScript
/*!
* @antv/g-mobile-webgl
* @description A renderer implemented by WebGL1/2 in mobile environment
* @version 1.1.1
* @date 12/24/2025, 11:57:39 AM
* @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 { AbstractRendererPlugin, AbstractRenderer, ImageLoader, MobileInteraction, HTMLRenderer } from '@antv/g-lite';
export { MobileInteraction as DomInteraction, HTMLRenderer } from '@antv/g-lite';
import * as DeviceRenderer from '@antv/g-plugin-device-renderer';
export { DeviceRenderer };
import * as DragDropEvent from '@antv/g-plugin-dragndrop';
import * as GesturePlugin from '@antv/g-plugin-gesture';
import { isNil } from '@antv/util';
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
import { WebGLDeviceContribution } from '@antv/g-device-api';
import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
function isCanvasElement(el) {
if (!el || typeof el !== 'object') return false;
if (el.nodeType === 1 && el.nodeName) {
// HTMLCanvasElement
return true;
}
// CanvasElement
return !!el.isCanvasElement;
}
var WebGLContextService = /*#__PURE__*/function () {
function WebGLContextService(context) {
_classCallCheck(this, WebGLContextService);
this.canvasConfig = context.config;
// @ts-ignore
this.deviceRendererPlugin = context.deviceRendererPlugin;
}
return _createClass(WebGLContextService, [{
key: "init",
value: function () {
var _init = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var _this$canvasConfig, canvas, devicePixelRatio, dpr;
return _regeneratorRuntime().wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_this$canvasConfig = this.canvasConfig, canvas = _this$canvasConfig.canvas, devicePixelRatio = _this$canvasConfig.devicePixelRatio;
this.$canvas = canvas;
// 实际获取到小程序环境的上下文
this.context = this.$canvas.getContext('webgl');
// use user-defined dpr first
dpr = devicePixelRatio || 1;
dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
this.dpr = dpr;
this.resize(this.canvasConfig.width, this.canvasConfig.height);
case 1:
case "end":
return _context.stop();
}
}, _callee, this);
}));
function init() {
return _init.apply(this, arguments);
}
return init;
}()
}, {
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() {
// TODO: 小程序环境销毁 context
this.context = null;
this.$canvas = null;
}
}, {
key: "resize",
value: function resize(width, height) {
var pixelRatio = devicePixelRatio;
var canvasDOM = this.$canvas; // HTMLCanvasElement or canvasElement
// 浏览器环境设置style样式
// @ts-ignore 使用style功能判断不使用类型判断更准确
if (canvasDOM.style) {
// @ts-ignore
canvasDOM.style.width = "".concat(width, "px");
// @ts-ignore
canvasDOM.style.height = "".concat(height, "px");
}
if (isCanvasElement(canvasDOM)) {
canvasDOM.width = width * pixelRatio;
canvasDOM.height = height * pixelRatio;
// if (pixelRatio !== 1) {
// this.context.scale(pixelRatio, pixelRatio);
// }
}
}
}, {
key: "applyCursorStyle",
value: function applyCursorStyle(cursor) {
// 小程序环境无需设置鼠标样式
}
}, {
key: "toDataURL",
value: function () {
var _toDataURL = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(options) {
return _regeneratorRuntime().wrap(function (_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
return _context2.abrupt("return", this.deviceRendererPlugin.toDataURL(options));
case 1:
case "end":
return _context2.stop();
}
}, _callee2, this);
}));
function toDataURL(_x) {
return _toDataURL.apply(this, arguments);
}
return toDataURL;
}()
}]);
}();
var ContextRegisterPlugin = /*#__PURE__*/function (_AbstractRendererPlug) {
function ContextRegisterPlugin(rendererPlugin, config) {
var _this;
_classCallCheck(this, ContextRegisterPlugin);
_this = _callSuper(this, ContextRegisterPlugin);
_this.name = 'mobile-webgl-context-register';
_this.rendererPlugin = rendererPlugin;
_this.config = config;
return _this;
}
_inherits(ContextRegisterPlugin, _AbstractRendererPlug);
return _createClass(ContextRegisterPlugin, [{
key: "init",
value: function init() {
this.context.ContextService = WebGLContextService;
this.context.deviceRendererPlugin = this.rendererPlugin;
var config = this.config;
this.context.deviceContribution = new WebGLDeviceContribution(_objectSpread({}, config !== null && config !== void 0 && config.targets ? {
targets: config.targets
} : {
targets: ['webgl2', 'webgl1']
}));
}
}, {
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]);
var deviceRendererPlugin = new DeviceRenderer.Plugin();
_this.registerPlugin(new ContextRegisterPlugin(deviceRendererPlugin, config));
_this.registerPlugin(new ImageLoader.Plugin());
_this.registerPlugin(deviceRendererPlugin);
_this.registerPlugin(new MobileInteraction.Plugin());
_this.registerPlugin(new HTMLRenderer.Plugin());
_this.registerPlugin(new DragDropEvent.Plugin({
isDocumentDraggable: isNil(config === null || config === void 0 ? void 0 : config.isDocumentDraggable) ? true : config.isDocumentDraggable,
isDocumentDroppable: isNil(config === null || config === void 0 ? void 0 : config.isDocumentDroppable) ? true : config.isDocumentDroppable,
dragstartDistanceThreshold: isNil(config === null || config === void 0 ? void 0 : config.dragstartDistanceThreshold) ? 10 : config.dragstartDistanceThreshold,
dragstartTimeThreshold: isNil(config === null || config === void 0 ? void 0 : config.dragstartTimeThreshold) ? 50 : config.dragstartTimeThreshold
}));
_this.registerPlugin(new GesturePlugin.Plugin({
isDocumentGestureEnabled: true
}));
return _this;
}
_inherits(Renderer, _AbstractRenderer);
return _createClass(Renderer);
}(AbstractRenderer);
export { Renderer };
//# sourceMappingURL=index.esm.js.map