feat(api): getCanvas() (#452)

* feat(api): getCanvas()

* chore: refactor duplicated code

src/core/gosling-component.tsx

@@ -120,12 +120,15 @@ export const GoslingComponent = forwardRef((props: GoslingCompProps, ref: any) =
  });
  return ids;
  },
- exportPNG: (transparentBackground?: boolean) => {
+ getCanvas: (options: { resolution: number; transparentBackground: boolean }) => {
+ const resolution = options?.resolution ?? 4;
+ const transparentBackground = options?.transparentBackground ?? false;
+
  const renderer = hgRef.current.pixiRenderer;
  const renderTexture = PIXI.RenderTexture.create({
  width: renderer.width / 2,
  height: renderer.height / 2,
- resolution: 4
+ resolution
  });
 
  renderer.render(hgRef.current.pixiStage, renderTexture);
@@ -145,7 +148,17 @@ export const GoslingComponent = forwardRef((props: GoslingCompProps, ref: any) =
  }
  ctx.drawImage(canvas, 0, 0);
 
- canvasWithBg.toBlob((blob: any) => {
+ return {
+ canvas: canvasWithBg,
+ resolution,
+ canvasWidth: canvas.width,
+ canvasHeight: canvas.height
+ };
+ },
+ exportPNG: (transparentBackground?: boolean) => {
+ const { canvas } = ref.current.api.getCanvas({ resolution: 4, transparentBackground });
+
+ canvas.toBlob((blob: any) => {
  const a = document.createElement('a');
 
  document.body.append(a);
@@ -158,32 +171,9 @@ export const GoslingComponent = forwardRef((props: GoslingCompProps, ref: any) =
  }, 'image/png');
  },
  exportPDF: (transparentBackground?: boolean) => {
- const resolution = 4;
- const renderer = hgRef.current.pixiRenderer;
- const renderTexture = PIXI.RenderTexture.create({
- width: renderer.width / 2,
- height: renderer.height / 2,
- resolution
- });
-
- renderer.render(hgRef.current.pixiStage, renderTexture);
-
- const canvas = renderer.plugins.extract.canvas(renderTexture);
-
- // Set background color for the given theme in the gosling spec
- // Otherwise, it is transparent
- const canvasWithBg = document.createElement('canvas') as HTMLCanvasElement;
- canvasWithBg.width = canvas.width;
- canvasWithBg.height = canvas.height;
-
- const ctx = canvasWithBg.getContext('2d')!;
- if (!transparentBackground) {
- ctx.fillStyle = theme.root.background;
- ctx.fillRect(0, 0, canvasWithBg.width, canvasWithBg.height);
- }
- ctx.drawImage(canvas, 0, 0);
+ const { canvas } = ref.current.api.getCanvas({ resolution: 4, transparentBackground });
 
- const imgData = canvasWithBg.toDataURL('image/jpeg', 1);
+ const imgData = canvas.toDataURL('image/jpeg', 1);
 
  const pdf = new jsPDF({
  orientation: canvas.width < canvas.height ? 'p' : 'l',

src/editor/editor.tsx

@@ -398,11 +398,21 @@ function Editor(props: any) {
  if (!gosRef.current) return;
 
  // To test APIs, uncomment the following code.
- // ! Be aware that the first view is for the title/subtitle track. So navigation API does not work.
+ // // ! Be aware that the first view is for the title/subtitle track. So navigation API does not work.
  // const id = gosRef.current.api.getViewIds()?.[1]; //'view-1';
  // if(id) {
  // gosRef.current.api.zoomToExtent(id);
  // }
+ //
+ // // Static visualization rendered in canvas
+ // const { canvas } = gosRef.current.api.getCanvas({
+ // resolution: 1,
+ // transparentBackground: true,
+ // });
+ // const testDiv = document.getElementById('preview-container');
+ // if(canvas && testDiv) {
+ // testDiv.appendChild(canvas);
+ // }
  }}
  >
  <span style={{ cursor: 'pointer' }} onClick={() => window.open('https://gosling.js.org', '_blank')}>
@@ -698,7 +708,10 @@ function Editor(props: any) {
  size={isShowDataPreview ? '40%' : `calc(100% - ${BOTTOM_PANEL_HEADER_HEIGHT}px)`}
  maxSize={window.innerHeight - EDITOR_HEADER_HEIGHT - BOTTOM_PANEL_HEADER_HEIGHT}
  >
- <div className={`preview-container ${theme === 'dark' ? 'dark' : ''}`}>
+ <div
+ id="preview-container"
+ className={`preview-container ${theme === 'dark' ? 'dark' : ''}`}
+ >
  <gosling.GoslingComponent
  ref={gosRef}
  spec={goslingSpec}