1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 | (function (global, factory) {
|
23 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
24 | typeof define === 'function' && define.amd ? define(factory) :
|
25 | (global.Viz = factory());
|
26 | }(this, (function () { 'use strict';
|
27 |
|
28 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
|
29 | return typeof obj;
|
30 | } : function (obj) {
|
31 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
32 | };
|
33 |
|
34 | var classCallCheck = function (instance, Constructor) {
|
35 | if (!(instance instanceof Constructor)) {
|
36 | throw new TypeError("Cannot call a class as a function");
|
37 | }
|
38 | };
|
39 |
|
40 | var createClass = function () {
|
41 | function defineProperties(target, props) {
|
42 | for (var i = 0; i < props.length; i++) {
|
43 | var descriptor = props[i];
|
44 | descriptor.enumerable = descriptor.enumerable || false;
|
45 | descriptor.configurable = true;
|
46 | if ("value" in descriptor) descriptor.writable = true;
|
47 | Object.defineProperty(target, descriptor.key, descriptor);
|
48 | }
|
49 | }
|
50 |
|
51 | return function (Constructor, protoProps, staticProps) {
|
52 | if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
53 | if (staticProps) defineProperties(Constructor, staticProps);
|
54 | return Constructor;
|
55 | };
|
56 | }();
|
57 |
|
58 | var _extends = Object.assign || function (target) {
|
59 | for (var i = 1; i < arguments.length; i++) {
|
60 | var source = arguments[i];
|
61 |
|
62 | for (var key in source) {
|
63 | if (Object.prototype.hasOwnProperty.call(source, key)) {
|
64 | target[key] = source[key];
|
65 | }
|
66 | }
|
67 | }
|
68 |
|
69 | return target;
|
70 | };
|
71 |
|
72 | var WorkerWrapper = function () {
|
73 | function WorkerWrapper(worker) {
|
74 | var _this = this;
|
75 |
|
76 | classCallCheck(this, WorkerWrapper);
|
77 |
|
78 | this.worker = worker;
|
79 | this.listeners = [];
|
80 | this.nextId = 0;
|
81 |
|
82 | this.worker.addEventListener('message', function (event) {
|
83 | var id = event.data.id;
|
84 | var error = event.data.error;
|
85 | var result = event.data.result;
|
86 |
|
87 | _this.listeners[id](error, result);
|
88 | delete _this.listeners[id];
|
89 | });
|
90 | }
|
91 |
|
92 | createClass(WorkerWrapper, [{
|
93 | key: 'render',
|
94 | value: function render(src, options) {
|
95 | var _this2 = this;
|
96 |
|
97 | return new Promise(function (resolve, reject) {
|
98 | var id = _this2.nextId++;
|
99 |
|
100 | _this2.listeners[id] = function (error, result) {
|
101 | if (error) {
|
102 | reject(new Error(error.message, error.fileName, error.lineNumber));
|
103 | return;
|
104 | }
|
105 | resolve(result);
|
106 | };
|
107 |
|
108 | _this2.worker.postMessage({ id: id, src: src, options: options });
|
109 | });
|
110 | }
|
111 | }]);
|
112 | return WorkerWrapper;
|
113 | }();
|
114 |
|
115 | var ModuleWrapper = function ModuleWrapper(module, render) {
|
116 | classCallCheck(this, ModuleWrapper);
|
117 |
|
118 | var instance = module();
|
119 | this.render = function (src, options) {
|
120 | return new Promise(function (resolve, reject) {
|
121 | try {
|
122 | resolve(render(instance, src, options));
|
123 | } catch (error) {
|
124 | reject(error);
|
125 | }
|
126 | });
|
127 | };
|
128 | };
|
129 |
|
130 |
|
131 |
|
132 |
|
133 | function b64EncodeUnicode(str) {
|
134 | return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
|
135 | return String.fromCharCode('0x' + p1);
|
136 | }));
|
137 | }
|
138 |
|
139 | function defaultScale() {
|
140 | if ('devicePixelRatio' in window && window.devicePixelRatio > 1) {
|
141 | return window.devicePixelRatio;
|
142 | } else {
|
143 | return 1;
|
144 | }
|
145 | }
|
146 |
|
147 | function svgXmlToImageElement(svgXml) {
|
148 | var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
149 | _ref$scale = _ref.scale,
|
150 | scale = _ref$scale === undefined ? defaultScale() : _ref$scale,
|
151 | _ref$mimeType = _ref.mimeType,
|
152 | mimeType = _ref$mimeType === undefined ? "image/png" : _ref$mimeType,
|
153 | _ref$quality = _ref.quality,
|
154 | quality = _ref$quality === undefined ? 1 : _ref$quality;
|
155 |
|
156 | return new Promise(function (resolve, reject) {
|
157 | var svgImage = new Image();
|
158 |
|
159 | svgImage.onload = function () {
|
160 | var canvas = document.createElement('canvas');
|
161 | canvas.width = svgImage.width * scale;
|
162 | canvas.height = svgImage.height * scale;
|
163 |
|
164 | var context = canvas.getContext("2d");
|
165 | context.drawImage(svgImage, 0, 0, canvas.width, canvas.height);
|
166 |
|
167 | canvas.toBlob(function (blob) {
|
168 | var image = new Image();
|
169 | image.src = URL.createObjectURL(blob);
|
170 | image.width = svgImage.width;
|
171 | image.height = svgImage.height;
|
172 |
|
173 | resolve(image);
|
174 | }, mimeType, quality);
|
175 | };
|
176 |
|
177 | svgImage.onerror = function (e) {
|
178 | var error;
|
179 |
|
180 | if ('error' in e) {
|
181 | error = e.error;
|
182 | } else {
|
183 | error = new Error('Error loading SVG');
|
184 | }
|
185 |
|
186 | reject(error);
|
187 | };
|
188 |
|
189 | svgImage.src = 'data:image/svg+xml;base64,' + b64EncodeUnicode(svgXml);
|
190 | });
|
191 | }
|
192 |
|
193 | function svgXmlToImageElementFabric(svgXml) {
|
194 | var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
195 | _ref2$scale = _ref2.scale,
|
196 | scale = _ref2$scale === undefined ? defaultScale() : _ref2$scale,
|
197 | _ref2$mimeType = _ref2.mimeType,
|
198 | mimeType = _ref2$mimeType === undefined ? 'image/png' : _ref2$mimeType,
|
199 | _ref2$quality = _ref2.quality,
|
200 | quality = _ref2$quality === undefined ? 1 : _ref2$quality;
|
201 |
|
202 | var multiplier = scale;
|
203 |
|
204 | var format = void 0;
|
205 | if (mimeType == 'image/jpeg') {
|
206 | format = 'jpeg';
|
207 | } else if (mimeType == 'image/png') {
|
208 | format = 'png';
|
209 | }
|
210 |
|
211 | return new Promise(function (resolve, reject) {
|
212 | fabric.loadSVGFromString(svgXml, function (objects, options) {
|
213 |
|
214 | if (objects.length == 0) {
|
215 | reject(new Error('Error loading SVG with Fabric'));
|
216 | }
|
217 |
|
218 | var element = document.createElement("canvas");
|
219 | element.width = options.width;
|
220 | element.height = options.height;
|
221 |
|
222 | var canvas = new fabric.Canvas(element, { enableRetinaScaling: false });
|
223 | var obj = fabric.util.groupSVGElements(objects, options);
|
224 | canvas.add(obj).renderAll();
|
225 |
|
226 | var image = new Image();
|
227 | image.src = canvas.toDataURL({ format: format, multiplier: multiplier, quality: quality });
|
228 | image.width = options.width;
|
229 | image.height = options.height;
|
230 |
|
231 | resolve(image);
|
232 | });
|
233 | });
|
234 | }
|
235 |
|
236 | var Viz = function () {
|
237 | function Viz() {
|
238 | var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
239 | workerURL = _ref3.workerURL,
|
240 | worker = _ref3.worker,
|
241 | Module = _ref3.Module,
|
242 | render = _ref3.render;
|
243 |
|
244 | classCallCheck(this, Viz);
|
245 |
|
246 | if (typeof workerURL !== 'undefined') {
|
247 | this.wrapper = new WorkerWrapper(new Worker(workerURL));
|
248 | } else if (typeof worker !== 'undefined') {
|
249 | this.wrapper = new WorkerWrapper(worker);
|
250 | } else if (typeof Module !== 'undefined' && typeof render !== 'undefined') {
|
251 | this.wrapper = new ModuleWrapper(Module, render);
|
252 | } else if (typeof Viz.Module !== 'undefined' && typeof Viz.render !== 'undefined') {
|
253 | this.wrapper = new ModuleWrapper(Viz.Module, Viz.render);
|
254 | } else {
|
255 | throw new Error('Must specify workerURL or worker option, Module and render options, or include one of full.render.js or lite.render.js after viz.js.');
|
256 | }
|
257 | }
|
258 |
|
259 | createClass(Viz, [{
|
260 | key: 'renderString',
|
261 | value: function renderString(src) {
|
262 | var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
263 | _ref4$format = _ref4.format,
|
264 | format = _ref4$format === undefined ? 'svg' : _ref4$format,
|
265 | _ref4$engine = _ref4.engine,
|
266 | engine = _ref4$engine === undefined ? 'dot' : _ref4$engine,
|
267 | _ref4$files = _ref4.files,
|
268 | files = _ref4$files === undefined ? [] : _ref4$files,
|
269 | _ref4$images = _ref4.images,
|
270 | images = _ref4$images === undefined ? [] : _ref4$images,
|
271 | _ref4$yInvert = _ref4.yInvert,
|
272 | yInvert = _ref4$yInvert === undefined ? false : _ref4$yInvert,
|
273 | _ref4$nop = _ref4.nop,
|
274 | nop = _ref4$nop === undefined ? 0 : _ref4$nop;
|
275 |
|
276 | for (var i = 0; i < images.length; i++) {
|
277 | files.push({
|
278 | path: images[i].path,
|
279 | data: '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n<svg width="' + images[i].width + '" height="' + images[i].height + '"></svg>'
|
280 | });
|
281 | }
|
282 |
|
283 | return this.wrapper.render(src, { format: format, engine: engine, files: files, images: images, yInvert: yInvert, nop: nop });
|
284 | }
|
285 | }, {
|
286 | key: 'renderSVGElement',
|
287 | value: function renderSVGElement(src) {
|
288 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
289 |
|
290 | return this.renderString(src, _extends({}, options, { format: 'svg' })).then(function (str) {
|
291 | var parser = new DOMParser();
|
292 | return parser.parseFromString(str, 'image/svg+xml').documentElement;
|
293 | });
|
294 | }
|
295 | }, {
|
296 | key: 'renderImageElement',
|
297 | value: function renderImageElement(src) {
|
298 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
299 | var scale = options.scale,
|
300 | mimeType = options.mimeType,
|
301 | quality = options.quality;
|
302 |
|
303 |
|
304 | return this.renderString(src, _extends({}, options, { format: 'svg' })).then(function (str) {
|
305 | if ((typeof fabric === 'undefined' ? 'undefined' : _typeof(fabric)) === "object" && fabric.loadSVGFromString) {
|
306 | return svgXmlToImageElementFabric(str, { scale: scale, mimeType: mimeType, quality: quality });
|
307 | } else {
|
308 | return svgXmlToImageElement(str, { scale: scale, mimeType: mimeType, quality: quality });
|
309 | }
|
310 | });
|
311 | }
|
312 | }, {
|
313 | key: 'renderJSONObject',
|
314 | value: function renderJSONObject(src) {
|
315 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
316 | var format = options.format;
|
317 |
|
318 |
|
319 | if (format !== 'json' || format !== 'json0') {
|
320 | format = 'json';
|
321 | }
|
322 |
|
323 | return this.renderString(src, _extends({}, options, { format: format })).then(function (str) {
|
324 | return JSON.parse(str);
|
325 | });
|
326 | }
|
327 | }]);
|
328 | return Viz;
|
329 | }();
|
330 |
|
331 | return Viz;
|
332 |
|
333 | })));
|