#101 stageRef promoted to Provider, export working

src/core/providers/canvas/canvas.model.ts

@@ -29,5 +29,6 @@ export interface CanvasContextModel {
   addNewShape: (type: ShapeType, x: number, y: number) => string;
   updateShapeSizeAndPosition: (id: string, position: Coord, size: Size) => void;
   updateShapePosition: (id: string, position: Coord) => void;
+  stageRef: React.RefObject<Konva.Stage>;
   selectionInfo: SelectionInfo;
 }

src/core/providers/canvas/canvas.provider.tsx

@@ -4,6 +4,7 @@ import { CanvasContext } from './canvas.context';
 import { useSelection } from './use-selection.hook';
 import { createShape } from '@/pods/canvas/canvas.model';
 import { v4 as uuidv4 } from 'uuid';
+import Konva from 'konva';
 
 interface Props {
   children: React.ReactNode;
@@ -13,6 +14,7 @@ export const CanvasProvider: React.FC<Props> = props => {
   const { children } = props;
   const [shapes, setShapes] = React.useState<ShapeModel[]>([]);
   const [scale, setScale] = React.useState(1);
+  const stageRef = React.useRef<Konva.Stage>(null);
 
   const selectionInfo = useSelection(shapes, setShapes);
 
@@ -62,6 +64,7 @@ export const CanvasProvider: React.FC<Props> = props => {
         pasteShape,
         updateShapeSizeAndPosition,
         updateShapePosition,
+        stageRef,
       }}
     >
       {children}

src/pods/canvas/canvas.pod.tsx

@@ -23,6 +23,7 @@ export const CanvasPod = () => {
     addNewShape,
     updateShapeSizeAndPosition,
     updateShapePosition,
+    stageRef,
   } = useCanvasContext();
 
   const {
@@ -45,7 +46,7 @@ export const CanvasPod = () => {
   };
 
   const { isDraggedOver, dropRef } = useDropShape();
-  const { stageRef } = useMonitorShape(dropRef, addNewShapeAndSetSelected);
+  useMonitorShape(dropRef, addNewShapeAndSetSelected);
 
   const getSelectedShapeKonvaId = (): string => {
     let result = '';
@@ -68,7 +69,7 @@ export const CanvasPod = () => {
     showSnapInVerticalLine,
     yCoordHorizontalLine,
     xCoordVerticalLine,
-  } = useSnapIn(stageRef, transformerRef, selectedShapeKonvaId);
+  } = useSnapIn(transformerRef, selectedShapeKonvaId);
 
   const { handleTransform, handleTransformerBoundBoxFunc } = useTransform(
     updateShapeSizeAndPosition,

src/pods/canvas/use-monitor-shape.hook.ts

@@ -1,19 +1,19 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import invariant from 'tiny-invariant';
 import {
   extractScreenCoordinatesFromPragmaticLocation,
   portScreenPositionToDivCoordinates,
   convertFromDivElementCoordsToKonvaCoords,
 } from './canvas.util';
-import Konva from 'konva';
 import { ShapeType } from '@/core/model';
+import { useCanvasContext } from '@/core/providers';
 
 export const useMonitorShape = (
   dropRef: React.MutableRefObject<null>,
   addNewShape: (type: ShapeType, x: number, y: number) => void
 ) => {
-  const stageRef = useRef<Konva.Stage>(null);
+  const { stageRef } = useCanvasContext();
 
   useEffect(() => {
     return monitorForElements({
@@ -54,6 +54,4 @@ export const useMonitorShape = (
       },
     });
   }, []);
-
-  return { stageRef };
 };

src/pods/canvas/use-snapin.hook.tsx

@@ -1,13 +1,12 @@
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
-import { Stage } from 'konva/lib/Stage';
 import invariant from 'tiny-invariant';
 import { ClosestSnapLines, SnapEdges, SnapLines } from './canvas.model';
 import { getClosestSnapLines } from './snap.utils';
 import { useState } from 'react';
+import { useCanvasContext } from '@/core/providers';
 
 export const useSnapIn = (
-  stageRef: React.RefObject<Stage>,
   transformRef: React.RefObject<Konva.Transformer>,
   excludedShapeId: string
 ) => {
@@ -16,6 +15,7 @@ export const useSnapIn = (
   const [showSnapInVerticalLine, setShowSnapInVerticalLine] = useState(false);
   const [yCoordHorizontalLine, setYCoordHorizontalLine] = useState(0);
   const [xCoordVerticalLine, setXCoordVerticalLine] = useState(0);
+  const { stageRef } = useCanvasContext();
 
   const handleTransformerDragMove = (e: KonvaEventObject<DragEvent>) => {
     if (!excludedShapeId) return;

src/pods/toolbar/components/export-button/export-button.tsx

@@ -1,14 +1,44 @@
 import { ExportIcon } from '@/common/components/icons/export-icon.component';
+import { useCanvasContext } from '@/core/providers';
 import ToolbarButton from '@/pods/toolbar/components/toolbar-button/toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
 
 export const ExportButton = () => {
-  const handleClick = () => {
-    console.log('Export');
+  const { stageRef, selectionInfo } = useCanvasContext();
+  const { transformerRef } = selectionInfo;
+
+  const hideTransformer = () => {
+    if (transformerRef.current) {
+      transformerRef.current.hide();
+    }
+  };
+
+  const showTransformer = () => {
+    if (transformerRef.current) {
+      transformerRef.current.show();
+    }
+  };
+
+  const createDownloadLink = (dataURL: string) => {
+    const link = document.createElement('a');
+    link.href = dataURL;
+    link.download = 'canvas.png';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const handleExport = () => {
+    if (!stageRef.current) return;
+
+    hideTransformer();
+    const dataURL = stageRef.current.toDataURL({ mimeType: 'image/png' });
+    createDownloadLink(dataURL);
+    showTransformer();
   };
 
   return (
-    <ToolbarButton onClick={handleClick} className={classes.button}>
+    <ToolbarButton onClick={handleExport} className={classes.button}>
       <ExportIcon />
       <span>Export</span>
     </ToolbarButton>