11<script >
2+ import { getRetinaRatio } from ' ./../helpers.js'
3+
24/**
35 * Function that takes in array of VNodes and adds props from a provided props object.
46 * @private
@@ -22,6 +24,27 @@ const addProp = function(slotArray, newProps) {
2224 }
2325 return [];
2426}
27+
28+ /**
29+ * Given a canvas context, x and y offsets, and an image URI, render the image to the context.
30+ * @private
31+ * @param {Context} ctx The canvas context.
32+ * @param {string} uri The image data URI.
33+ * @param {int} x The x offset.
34+ * @param {int} y The y offset.
35+ */
36+ const renderToContext = function (ctx , uri , x , y , width , height ) {
37+ return new Promise ((resolve , reject ) => {
38+ var img = new Image ;
39+ img .onload = () => {
40+ ctx .drawImage (img, x, y, width, height);
41+ resolve ();
42+ };
43+ img .src = uri;
44+ });
45+ };
46+
47+
2548/**
2649 * This component is a container for axis and plot components,
2750 * which passes its props to its children and imposes styles.
@@ -109,10 +132,83 @@ export default {
109132 );
110133 let classes = [' vdp-plot-container'
111134 let styles = {
112- width: ( this .pMarginLeft + this . pWidth + this . pMarginRight ) + ' px'
113- height: ( this .pMarginTop + this . pHeight + this . pMarginBottom ) + ' px'
135+ width: this .fullWidth + ' px'
136+ height: this .fullHeight + ' px'
114137 };
115138 return h (' div' : classes, style: styles }, children);
139+ },
140+ computed: {
141+ fullWidth () {
142+ return this .pMarginLeft + this .pWidth + this .pMarginRight ;
143+ },
144+ fullHeight () {
145+ return this .pMarginTop + this .pHeight + this .pMarginBottom ;
146+ }
147+ },
148+ methods: {
149+ renderToContext (ctx , x , y , uri ) {
150+ var img = new Image ;
151+ img .onload = () => {
152+ ctx .drawImage (img, x, y); // Or at whatever offset you like
153+ };
154+ img .src = uri;
155+ },
156+ download () {
157+ const canvas = document .createElement (' canvas'
158+ const ctx = canvas .getContext (' 2d'
159+
160+ const ratio = getRetinaRatio (ctx);
161+ const scaledWidth = this .fullWidth * ratio;
162+ const scaledHeight = this .fullHeight * ratio;
163+
164+ canvas .width = scaledWidth;
165+ canvas .height = scaledHeight;
166+ ctx .scale (ratio, ratio);
167+
168+ const renderAxisToContext = (axisType ) => {
169+ if (this .$slots [axisType].length > 0 ) {
170+ return this .$slots [axisType][0 ].componentInstance .downloadAxis ()
171+ .then ((uri ) => {
172+ console .log (uri);
173+ const x = this .$slots [axisType][0 ].componentInstance .computedLeft ;
174+ const y = this .$slots [axisType][0 ].componentInstance .computedTop ;
175+ const width = this .$slots [axisType][0 ].componentInstance .computedWidth ;
176+ const height = this .$slots [axisType][0 ].componentInstance .computedHeight ;
177+ return renderToContext (ctx, uri, x, y, width, height);
178+ });
179+ }
180+ return Promise .resolve ();
181+ };
182+
183+ const renderPlotToContext = () => {
184+ if (this .$slots .plot .length > 0 ) {
185+ return this .$slots .plot [0 ].componentInstance .downloadPlot ()
186+ .then ((uri ) => {
187+ console .log (uri);
188+ const x = this .pMarginLeft ;
189+ const y = this .pMarginTop ;
190+ const width = this .pWidth ;
191+ const height = this .pHeight ;
192+ return renderToContext (ctx, uri, x, y, width, height);
193+ });
194+ }
195+ return Promise .resolve ();
196+ };
197+
198+ const renderPromises = [];
199+ renderPromises .push (renderAxisToContext (" axisTop"
200+ renderPromises .push (renderAxisToContext (" axisLeft"
201+ renderPromises .push (renderPlotToContext ());
202+ renderPromises .push (renderAxisToContext (" axisRight"
203+ renderPromises .push (renderAxisToContext (" axisBottom"
204+
205+ return new Promise ((resolve , reject ) => {
206+ Promise .all (renderPromises).then (() => {
207+ const uri = canvas .toDataURL (" image/png"
208+ resolve (uri);
209+ });
210+ });
211+ }
116212 }
117213}
118214script >
0 commit comments