core-graphics/lib/contrib/export.js

A core library for creating shape-based graphic editors

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.getSceneCanvas = getSceneCanvas;
exports.getSceneBlob = getSceneBlob;
exports.default = getScenePNGBlob;
exports.getSceneBase64 = getSceneBase64;

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _server = require('react-dom/server');

var _boundingBox = require('../utils/bounding-box');

var _base = require('../utils/base64');

var _staticRenderer = require('../renderer/static-renderer');

var _staticRenderer2 = _interopRequireDefault(_staticRenderer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

var SCENE_PADDING = 128;
function renderSVGToBase64(elem) {
    var svgString = (0, _server.renderToStaticMarkup)(elem);
    var addedXMLNamespace = svgString.replace(/<svg/, '<svg xmlns="http://www.w3.org/2000/svg"\n          xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" ');
    var base64Encoded = (0, _base.btoa)(addedXMLNamespace);
    var src = 'data:image/svg+xml;base64,' + base64Encoded;
    return src;
}
function getSceneRenderViewport(params) {
    var scene = params.scene;
    var shapesDeclarations = params.shapesDeclarations;
    var _params$minWidth = params.minWidth;
    var minWidth = _params$minWidth === undefined ? SCENE_PADDING * 2 : _params$minWidth;
    var _params$minHeight = params.minHeight;
    var minHeight = _params$minHeight === undefined ? SCENE_PADDING * 2 : _params$minHeight;
    var _params$padding = params.padding;
    var padding = _params$padding === undefined ? SCENE_PADDING : _params$padding;

    if (scene.shapesOrder.length === 0) {
        var _width = Math.max(minWidth, padding * 2);
        var _height = Math.max(minHeight, padding * 2);
        return { x1: 0, x2: _width, y1: 0, y2: _height, width: _width, height: _height };
    }
    var bb = (0, _boundingBox.getSceneBB)({ scene: scene, shapesDeclarations: shapesDeclarations });
    var width = bb.width;
    var height = bb.height;

    var hPadding = Math.max(padding, (minWidth - width) / 2);
    var vPadding = Math.max(padding, (minHeight - height) / 2);
    return (0, _boundingBox.roundBB)((0, _boundingBox.padBB)({
        left: hPadding,
        right: hPadding,
        top: vPadding,
        bottom: vPadding
    }, bb));
}
;
function getSceneCanvas(params, cb) {
    var scene = params.scene;
    var shapesDeclarations = params.shapesDeclarations;
    var grid = params.grid;
    var minWidth = params.minWidth;
    var minHeight = params.minHeight;
    var padding = params.padding;

    var $canvas = document.createElement('canvas');
    var ctx = $canvas.getContext('2d');
    var viewport = getSceneRenderViewport({ shapesDeclarations: shapesDeclarations, scene: scene, minWidth: minWidth, minHeight: minHeight, padding: padding });
    var width = viewport.width;
    var 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 (e) {
        ctx.drawImage($image, 0, 0, viewport.width, viewport.height);
        cb($canvas, { width: width, height: height });
    };
    $image.src = renderSVGToBase64(React.createElement(_staticRenderer2.default, { scene: scene, grid: grid, shapesDeclarations: shapesDeclarations, viewport: viewport }));
}
function getSceneBlob(params, cb) {
    var _params$type = params.type;
    var type = _params$type === undefined ? 'image/png' : _params$type;
    var _params$quality = params.quality;
    var quality = _params$quality === undefined ? 0.92 : _params$quality;

    getSceneCanvas(params, function (canvas, dims) {
        canvas.toBlob(function (blob) {
            return cb(blob, dims);
        }, type, quality);
    });
}
;
function getScenePNGBlob(params, cb) {
    var _params$quality2 = params.quality;
    var quality = _params$quality2 === undefined ? 0.92 : _params$quality2;

    getSceneCanvas(params, function (canvas, dims) {
        canvas.toBlob(function (blob) {
            return cb(blob, dims);
        }, 'image/png', quality);
    });
}
;
function getSceneBase64(params, cb) {
    var _params$type2 = params.type;
    var type = _params$type2 === undefined ? 'image/png' : _params$type2;
    var _params$quality3 = params.quality;
    var quality = _params$quality3 === undefined ? 0.92 : _params$quality3;

    getSceneCanvas(params, function (canvas, dims) {
        var data = canvas.toDataURL(type, quality);
        cb(data, dims);
    });
}
;