@gorpacrate/core-graphics
Version:
A core library for creating shape-based graphic editors
88 lines • 4.57 kB
JavaScript
;
exports.__esModule = true;
var invariant = require("invariant");
var React = require("react");
var server_1 = require("react-dom/server");
var static_renderer_1 = require("../renderer/static-renderer");
var bounding_box_1 = require("../utils/bounding-box");
var SCENE_PADDING = 128;
function renderSVGToBase64(elem, additionalSvgDeclarations) {
var svgString = server_1.renderToStaticMarkup(elem);
svgString = svgString.replace(/<svg/, // addXMLNamespace
"<svg xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" ");
if (additionalSvgDeclarations) {
var parts = svgString.split('<svg');
if (parts[1]) {
var partsRest = parts.slice(1, parts.length).join('<svg'); // in case of embedded svgs
var parts2 = partsRest.split('>');
var parts2Rest = parts2.slice(1, parts2.length).join('>');
svgString = parts[0] + "<svg" + parts2[0] + ">" + additionalSvgDeclarations + parts2Rest;
}
}
var svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
return window.URL.createObjectURL(svgBlob);
}
function getSceneRenderViewport(params) {
var scene = params.scene, shapesDeclarations = params.shapesDeclarations, _a = params.minWidth, minWidth = _a === void 0 ? SCENE_PADDING * 2 : _a, _b = params.minHeight, minHeight = _b === void 0 ? SCENE_PADDING * 2 : _b, _c = params.padding, padding = _c === void 0 ? SCENE_PADDING : _c;
if (scene.shapesOrder.length === 0) {
var w = Math.max(minWidth, padding * 2);
var h = Math.max(minHeight, padding * 2);
return { x1: 0, x2: w, y1: 0, y2: h, width: w, height: h };
}
var bb = bounding_box_1.getSceneBB({ scene: scene, shapesDeclarations: shapesDeclarations });
var width = bb.width, height = bb.height;
var hPadding = Math.max(padding, (minWidth - width) / 2);
var vPadding = Math.max(padding, (minHeight - height) / 2);
return bounding_box_1.roundBB(bounding_box_1.padBB({
left: hPadding,
right: hPadding,
top: vPadding,
bottom: vPadding
}, bb));
}
function getSceneCanvas(params, cb, additionalSvgDeclarations) {
var scene = params.scene, shapesDeclarations = params.shapesDeclarations, grid = params.grid, minWidth = params.minWidth, minHeight = params.minHeight, padding = params.padding;
var $canvas = document.createElement('canvas');
var ctx = $canvas.getContext('2d');
if (!ctx) {
return invariant(false, 'can\'t get canvas 2d context');
}
var viewport = getSceneRenderViewport({ shapesDeclarations: shapesDeclarations, scene: scene, minWidth: minWidth, minHeight: minHeight, padding: padding });
var width = viewport.width, height = viewport.height;
var pixelRatio = window.devicePixelRatio || 1;
$canvas.width = width * pixelRatio;
$canvas.height = height * pixelRatio;
ctx.scale(pixelRatio, pixelRatio);
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, $canvas.width, $canvas.height);
var $image = new Image();
$image.onload = function () {
ctx.drawImage($image, 0, 0, viewport.width, viewport.height);
cb($canvas, { width: width, height: height });
};
$image.src = renderSVGToBase64((React.createElement(static_renderer_1["default"], { scene: scene, grid: grid, shapesDeclarations: shapesDeclarations, viewport: viewport })), additionalSvgDeclarations);
}
exports.getSceneCanvas = getSceneCanvas;
function getSceneBlob(params, cb) {
var _a = params.type, type = _a === void 0 ? 'image/png' : _a, _b = params.quality, quality = _b === void 0 ? 0.92 : _b;
getSceneCanvas(params, function (canvas, dims) {
canvas.toBlob(function (blob) { return (cb(blob, dims)); }, type, quality);
});
}
exports.getSceneBlob = getSceneBlob;
function getScenePNGBlob(params, cb) {
var _a = params.quality, quality = _a === void 0 ? 0.92 : _a;
getSceneCanvas(params, function (canvas, dims) {
canvas.toBlob(function (blob) { return (cb(blob, dims)); }, 'image/png', quality);
});
}
exports["default"] = getScenePNGBlob;
function getSceneBase64(params, cb, additionalSvgDeclarations) {
var _a = params.type, type = _a === void 0 ? 'image/png' : _a, _b = params.quality, quality = _b === void 0 ? 0.92 : _b;
getSceneCanvas(params, function (canvas, dims) {
var data = canvas.toDataURL(type, quality);
cb(data, dims);
}, additionalSvgDeclarations);
}
exports.getSceneBase64 = getSceneBase64;
//# sourceMappingURL=export.js.map