@antv/g-svg
Version:
A renderer implemented by SVG
303 lines (294 loc) • 13.1 kB
JavaScript
/*!
* @antv/g-svg
* @description A renderer implemented by SVG
* @version 2.0.38
* @date 5/9/2025, 8:22:08 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 { propertyMetadataCache, AbstractRendererPlugin, AbstractRenderer } from '@antv/g-lite';
import * as DomInteraction from '@antv/g-plugin-dom-interaction';
export { DomInteraction };
import * as SVGPicker from '@antv/g-plugin-svg-picker';
export { SVGPicker };
import * as SVGRenderer from '@antv/g-plugin-svg-renderer';
import { createSVGElement } from '@antv/g-plugin-svg-renderer';
export { SVGRenderer };
import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { isString } from '@antv/util';
var _excluded = ["offset", "composite", "computedOffset", "easing"],
_excluded2 = ["offset", "composite", "computedOffset", "easing", "transformOrigin"],
_excluded3 = ["offset", "composite", "computedOffset", "easing", "transformOrigin"],
_excluded4 = ["offset", "composite", "computedOffset", "easing", "transformOrigin"];
var SVGContextService = /*#__PURE__*/function () {
function SVGContextService(context) {
_classCallCheck(this, SVGContextService);
this.context = context;
this.canvasConfig = context.config;
}
return _createClass(SVGContextService, [{
key: "init",
value: function init() {
var _this$canvasConfig = this.canvasConfig,
container = _this$canvasConfig.container,
doc = _this$canvasConfig.document,
dpr = _this$canvasConfig.devicePixelRatio;
// create container
this.$container = isString(container) ? (doc || document).getElementById(container) : container;
if (this.$container) {
if (!this.$container.style.position) {
this.$container.style.position = 'relative';
}
var $namespace = createSVGElement('svg', doc);
$namespace.setAttribute('width', "".concat(this.canvasConfig.width));
$namespace.setAttribute('height', "".concat(this.canvasConfig.height));
this.$container.appendChild($namespace);
this.$namespace = $namespace;
}
this.dpr = dpr;
}
// @ts-ignore
}, {
key: "getDomElement",
value: function getDomElement() {
return this.$namespace;
}
}, {
key: "getContext",
value: function getContext() {
return this.$namespace;
}
}, {
key: "getDPR",
value: function getDPR() {
return this.dpr;
}
}, {
key: "getBoundingClientRect",
value: function getBoundingClientRect() {
var _this$$namespace;
return (_this$$namespace = this.$namespace) === null || _this$$namespace === void 0 ? void 0 : _this$$namespace.getBoundingClientRect();
}
}, {
key: "destroy",
value: function destroy() {
// destroy context
if (this.$container && this.$namespace && this.$namespace.parentNode) {
this.$container.removeChild(this.$namespace);
}
}
}, {
key: "resize",
value: function resize(width, height) {
// SVG should ignore DPR
if (this.$namespace) {
this.$namespace.setAttribute('width', "".concat(width));
this.$namespace.setAttribute('height', "".concat(height));
}
}
}, {
key: "applyCursorStyle",
value: function applyCursorStyle(cursor) {
if (this.$container) {
this.$container.style.cursor = cursor;
}
}
}, {
key: "generateCSSText",
value: function generateCSSText(animationName, selector, keyframes, timing) {
var prefixes = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
var duration = timing.duration,
easing = timing.easing,
delay = timing.delay,
direction = timing.direction,
iterations = timing.iterations,
fill = timing.fill;
return "@keyframes ".concat(animationName, "{").concat(keyframes.map(function (keyframe) {
keyframe.offset;
keyframe.composite;
var computedOffset = keyframe.computedOffset;
keyframe.easing;
var rest = _objectWithoutProperties(keyframe, _excluded);
var rules = Object.keys(rest).map(function (attributeName) {
return "".concat(attributeName, ":").concat(prefixes[attributeName] || '').concat(rest[attributeName], ";");
}).join('');
return "".concat(computedOffset * 100, "%{").concat(rules, "}");
}).join(''), "}") + "".concat(selector, " {animation: ").concat(animationName, " ").concat(duration, "ms ").concat(easing, " ").concat(delay, "ms ").concat(iterations === Infinity ? 'infinite' : iterations, " ").concat(direction, " ").concat(fill, ";}");
}
}, {
key: "toDataURL",
value: function () {
var _toDataURL = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var _this = this;
var cloneNode,
doc,
animationCounter,
$style,
svgDocType,
svgDoc;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
cloneNode = this.$namespace.cloneNode(true);
doc = this.canvasConfig.document;
animationCounter = 0;
$style = null;
this.context.renderingContext.root.forEach(function (object) {
var animations = object.getAnimations();
if (animations.length) {
if (!$style) {
// export animations to <style>, using CSS Transformation
$style = (doc || document).createElement('style');
cloneNode.appendChild($style);
}
// @ts-ignore
var svgElement = object.elementSVG;
var selfSelector = "#".concat(svgElement.$el.id);
var groupSelector = "#".concat(svgElement.$groupEl.id);
var selfCssText = '';
var groupCssText = '';
animations.forEach(function (animation) {
var keyframes = animation.effect.getKeyframes();
// split attributes into self and group
if (keyframes.length) {
var selfAttributes = [];
var groupAttributes = [];
var _keyframes$ = keyframes[0];
_keyframes$.offset;
_keyframes$.composite;
_keyframes$.computedOffset;
_keyframes$.easing;
_keyframes$.transformOrigin;
var rest = _objectWithoutProperties(_keyframes$, _excluded2);
Object.keys(rest).forEach(function (attributeName) {
var _propertyMetadataCach;
if (attributeName === 'transform') {
groupAttributes.push(attributeName);
}
var inherited = !!((_propertyMetadataCach = propertyMetadataCache[attributeName]) !== null && _propertyMetadataCach !== void 0 && _propertyMetadataCach.inh);
if (inherited) {
groupAttributes.push(attributeName);
} else if (attributeName !== 'transform') {
selfAttributes.push(attributeName);
}
});
if (groupAttributes.length) {
var keyframesWithGroup = keyframes.map(function (keyframe) {
var offset = keyframe.offset,
composite = keyframe.composite,
computedOffset = keyframe.computedOffset,
easing = keyframe.easing;
keyframe.transformOrigin;
var rest = _objectWithoutProperties(keyframe, _excluded3);
var ret = {
offset: offset,
composite: composite,
computedOffset: computedOffset,
easing: easing
};
Object.keys(rest).forEach(function (attributeName) {
if (groupAttributes.includes(attributeName)) {
ret[attributeName] = keyframe[attributeName];
}
});
return ret;
});
groupCssText += _this.generateCSSText("a".concat(animationCounter++), groupSelector, keyframesWithGroup, animation.effect.getComputedTiming(), {
transform: svgElement.$groupEl.getAttribute('transform')
});
}
if (selfAttributes.length) {
var keyframesWithSelf = keyframes.map(function (keyframe) {
var offset = keyframe.offset,
composite = keyframe.composite,
computedOffset = keyframe.computedOffset,
easing = keyframe.easing;
keyframe.transformOrigin;
var rest = _objectWithoutProperties(keyframe, _excluded4);
var ret = {
offset: offset,
composite: composite,
computedOffset: computedOffset,
easing: easing
};
Object.keys(rest).forEach(function (attributeName) {
if (selfAttributes.includes(attributeName)) {
ret[attributeName] = keyframe[attributeName];
}
});
return ret;
});
selfCssText += _this.generateCSSText("a".concat(animationCounter++), selfSelector, keyframesWithSelf, animation.effect.getComputedTiming());
}
}
});
$style.textContent += selfCssText + groupCssText;
}
});
svgDocType = document.implementation.createDocumentType('svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');
svgDoc = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg', svgDocType);
svgDoc.replaceChild(cloneNode, svgDoc.documentElement);
return _context.abrupt("return", "data:image/svg+xml;charset=utf8,".concat(encodeURIComponent(new XMLSerializer().serializeToString(svgDoc))));
case 10:
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 = 'svg-context-register';
return _this;
}
_inherits(ContextRegisterPlugin, _AbstractRendererPlug);
return _createClass(ContextRegisterPlugin, [{
key: "init",
value: function init() {
// @ts-ignore
this.context.ContextService = SVGContextService;
}
}, {
key: "destroy",
value: function destroy() {
delete this.context.ContextService;
}
}]);
}(AbstractRendererPlugin);
var Renderer = /*#__PURE__*/function (_AbstractRenderer) {
function Renderer() {
var _this;
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_classCallCheck(this, Renderer);
_this = _callSuper(this, Renderer, [config]);
_this.registerPlugin(new ContextRegisterPlugin());
_this.registerPlugin(new SVGRenderer.Plugin({
outputSVGElementId: config.outputSVGElementId
}));
_this.registerPlugin(new DomInteraction.Plugin());
_this.registerPlugin(new SVGPicker.Plugin());
return _this;
}
_inherits(Renderer, _AbstractRenderer);
return _createClass(Renderer);
}(AbstractRenderer);
export { Renderer };
//# sourceMappingURL=index.esm.js.map