Merge pull request #24 from Pettor/feature/save-image

feat: add save image button to drawer

src/components/library/editor/Editor.stories.tsx

@@ -21,6 +21,7 @@ const commonProps = {
       onSwitch: () => console.log("Switched"),
     },
     onNewImage: () => {},
+    onSaveImage: () => {},
   },
   ErrorComponent: () => <div>Error</div>,
   LoaderComponent: () => <div>Loading</div>,

src/components/library/editor/Editor.tsx

@@ -1,6 +1,5 @@
 import type { ComponentProps } from "react";
 import type { ReactElement } from "react";
-import { Provider } from "jotai/react";
 import { imageAtom } from "./atoms/ImageAtoms";
 import { imageUrlAtom } from "./atoms/ImageUrlAtoms";
 import type { ContentProps } from "./content/Content";
@@ -17,16 +16,14 @@ interface ImageEditorWithImageProps extends ContentProps, WithImageProps {
 function Editor({ url, image, ...contentProps }: ImageEditorWithImageProps): ReactElement {
   return (
     <ErrorBoundary fallback={<h1>Internal error</h1>}>
-      <Provider>
-        <HydrateAtoms
-          atomValues={[
-            [imageUrlAtom, url],
-            [imageAtom, image],
-          ]}
-        >
-          <Content {...contentProps} />
-        </HydrateAtoms>
-      </Provider>
+      <HydrateAtoms
+        atomValues={[
+          [imageUrlAtom, url],
+          [imageAtom, image],
+        ]}
+      >
+        <Content {...contentProps} />
+      </HydrateAtoms>
     </ErrorBoundary>
   );
 }

src/components/library/editor/drawer/AppDrawer.stories.tsx

@@ -19,6 +19,7 @@ const commonProps = {
   },
   onClose: () => {},
   onNewImage: () => {},
+  onSaveImage: () => {},
 } satisfies ComponentProps;
 
 export const App = {

src/components/library/editor/drawer/AppDrawer.tsx

@@ -1,5 +1,5 @@
 import { useRef, type ReactElement } from "react";
-import { FolderPlusIcon } from "@heroicons/react/24/solid";
+import { FolderPlusIcon, ArrowDownTrayIcon } from "@heroicons/react/24/solid";
 import { useOnClickOutside } from "usehooks-ts";
 import type { ThemeSwitchProps } from "../../theme/ThemeSwitch";
 import { ThemeSwitch } from "../../theme/ThemeSwitch";
@@ -10,9 +10,10 @@ export interface AppDrawerProps {
   themeSwitchProps: ThemeSwitchProps;
   onClose: () => void;
   onNewImage: () => void;
+  onSaveImage: () => void;
 }
 
-export function AppDrawer({ open, themeSwitchProps, onClose, onNewImage }: AppDrawerProps): ReactElement {
+export function AppDrawer({ open, themeSwitchProps, onClose, onNewImage, onSaveImage }: AppDrawerProps): ReactElement {
   const menuRef = useRef<HTMLUListElement>(null);
   useOnClickOutside(menuRef, onClose);
 
@@ -35,6 +36,12 @@ export function AppDrawer({ open, themeSwitchProps, onClose, onNewImage }: AppDr
               New Image
             </a>
           </li>
+          <li className="mt-4" onClick={onSaveImage}>
+            <a>
+              <ArrowDownTrayIcon className="h-6 w-6" />
+              Save Image
+            </a>
+          </li>
           <div className="flex flex-1" />
           <div className="flex items-center flex-row justify-end">
             <ThemeSwitch {...themeSwitchProps} />

src/components/library/editor/stage/StageComponent.tsx

@@ -19,23 +19,23 @@ export function StageComponent(): ReactElement {
   return (
     <div ref={ref} className="flex-1 overflow-hidden rounded-lg border-4 border-base-100">
       <Stage width={containerWidth} height={containerHeight} options={stageOptions}>
-        <StagedFilters
-          blur={{ blur }}
-          adjustement={{ brightness, contrast, saturation, red, green, blue }}
-          pixelate={{ enabled: pixelate > 0, size: pixelate }}
+        <StagedViewport
+          ref={registerViewport}
+          worldWidth={imageWidth}
+          worldHeight={imageHeight}
+          screenWidth={containerWidth}
+          screenHeight={containerHeight}
+          lock={lock}
+          zoom={zoom}
+          maxZoom={maxZoom}
+          minZoom={minZoom}
+          onZoomed={setZoom}
+          rotated={isRotated}
         >
-          <StagedViewport
-            ref={registerViewport}
-            worldWidth={imageWidth}
-            worldHeight={imageHeight}
-            screenWidth={containerWidth}
-            screenHeight={containerHeight}
-            lock={lock}
-            zoom={zoom}
-            maxZoom={maxZoom}
-            minZoom={minZoom}
-            onZoomed={setZoom}
-            rotated={isRotated}
+          <StagedFilters
+            blur={{ blur }}
+            adjustement={{ brightness, contrast, saturation, red, green, blue }}
+            pixelate={{ enabled: pixelate > 0, size: pixelate }}
           >
             <StagedImage
               imageUrl={imageUrl}
@@ -44,8 +44,8 @@ export function StageComponent(): ReactElement {
               scale={scale}
               rotation={rotation}
             />
-          </StagedViewport>
-        </StagedFilters>
+          </StagedFilters>
+        </StagedViewport>
       </Stage>
     </div>
   );

src/components/library/editor/viewport/ViewportComponent.tsx

@@ -28,7 +28,7 @@ export const ViewportComponent = PixiComponent<ViewportComponentProps, ViewportE
     const { app, ...viewportProps } = props;
     const { worldWidth, worldHeight, onZoomed, maxZoom, minZoom } = viewportProps;
 
-    const viewport = new ViewportExtended({
+    const viewport = new ViewportExtended(app, {
       ticker: ticker,
       events: app.renderer.events,
       ...viewportProps,

src/components/library/editor/viewport/ViewportExtended.tsx

@@ -1,14 +1,16 @@
 import type { IViewportOptions } from "pixi-viewport";
 import { Viewport } from "pixi-viewport";
+import type { Application, ICanvas } from "pixi.js";
 
 // this is a custom class that extends pixi-viewport's Viewport class
 // it's used to fix an issue with releasing the DOM element when the viewport is unmounted
 export class ViewportExtended extends Viewport {
+  public app: Application<ICanvas>;
   private renderedDOMElement?: HTMLElement;
 
-  constructor(options: IViewportOptions) {
+  constructor(app: Application<ICanvas>, options: IViewportOptions) {
     super(options);
-
+    this.app = app;
     this.lockDOMElement();
   }
 

src/components/views/editor/EditorView.stories.tsx

@@ -22,7 +22,8 @@ const commonProps = {
       mode: "light",
       onSwitch: () => console.log("Switched"),
     },
-    onNewImage: () => {},
+    onNewImage: () => console.log("onNewImage"),
+    onSaveImage: () => console.log("onSaveImage"),
   },
   ErrorComponent: () => <div>Error</div>,
   LoaderComponent: () => <div>Loading</div>,

src/libs/functions/CreateImage.ts

@@ -0,0 +1,14 @@
+import type { ViewportExtended } from "~/components/library/editor/viewport/ViewportExtended";
+
+export async function createImage(viewport: ViewportExtended): Promise<HTMLImageElement> {
+  const app = viewport.app;
+
+  const generatedImage = app.renderer.generateTexture(viewport, {
+    region: app.screen,
+    resolution: 2,
+  });
+
+  const image = app.renderer.plugins.extract.image(generatedImage, "image/png", 1.0);
+  generatedImage.destroy();
+  return image;
+}

src/pages/editor/EditorContext.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+import { Provider } from "jotai";
+
+export interface EditorContextProps {
+  children: ReactElement;
+}
+
+export function EditorContext({ children }: EditorContextProps): ReactElement {
+  return <Provider>{children}</Provider>;
+}

src/pages/editor/EditorPage.tsx

@@ -1,7 +1,6 @@
 import type { ReactElement } from "react";
-import { useNavigate } from "react-router-dom";
+import { useEditorPage } from "./UseEditorPage";
 import { ImageEditor } from "~/components/library/editor/Editor";
-import { useThemeSwitcher } from "~/components/library/theme/UseThemeSwitcher";
 import { ErrorView } from "~/components/views/error/ErrorView";
 import { LoadingView } from "~/components/views/loading/LoadingView";
 
@@ -10,20 +9,12 @@ export interface EditorPageProps {
 }
 
 export function EditorPage({ url }: EditorPageProps): ReactElement {
-  const navigate = useNavigate();
-  const themeSwitchProps = useThemeSwitcher();
-
-  function handleOnNewImage(): void {
-    navigate(`/`);
-  }
+  const appDrawerProps = useEditorPage();
 
   return (
     <ImageEditor
       url={url}
-      appdrawerProps={{
-        onNewImage: handleOnNewImage,
-        themeSwitchProps,
-      }}
+      appdrawerProps={appDrawerProps}
       LoaderComponent={() => <LoadingView />}
       ErrorComponent={() => <ErrorView onBack={() => console.log("onBack")} />}
     />

src/pages/editor/EditorRoute.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
 import { useAtomValue } from "jotai";
+import { EditorContext } from "./EditorContext";
 import { EditorPage } from "./EditorPage";
 import { ErrorView } from "~/components/views/error/ErrorView";
 import { useErrorView } from "~/components/views/error/UseErrorView";
@@ -13,7 +14,11 @@ export function Component(): ReactElement {
     return <ErrorView {...errorViewProps} message="File somehow went missing 🤔" />;
   }
 
-  return <EditorPage url={fileUrl} />;
+  return (
+    <EditorContext>
+      <EditorPage url={fileUrl} />
+    </EditorContext>
+  );
 }
 Component.displayName = "EditorPage";
 

src/pages/editor/UseEditorPage.ts

@@ -0,0 +1,37 @@
+import { useAtomValue } from "jotai";
+import { useNavigate } from "react-router-dom";
+import { viewportAtom } from "~/components/library/editor/atoms/viewport/ViewportAtoms";
+import type { AppDrawerProps } from "~/components/library/editor/drawer/AppDrawer";
+import { useThemeSwitcher } from "~/components/library/theme/UseThemeSwitcher";
+import { createImage } from "~/libs/functions/CreateImage";
+
+export function useEditorPage(): Omit<AppDrawerProps, "onClose" | "open"> {
+  const navigate = useNavigate();
+  const themeSwitchProps = useThemeSwitcher();
+  const viewport = useAtomValue(viewportAtom);
+
+  function handleOnNewImage(): void {
+    navigate(`/`);
+  }
+
+  async function handleOnSaveImage(): Promise<void> {
+    if (!viewport) {
+      console.error("Viewport is not available");
+      return;
+    }
+
+    const imagesrc = await createImage(viewport);
+    const createEl = document.createElement("a");
+
+    createEl.href = imagesrc.src;
+    createEl.download = "image.png";
+    createEl.click();
+    createEl.remove();
+  }
+
+  return {
+    onNewImage: handleOnNewImage,
+    onSaveImage: handleOnSaveImage,
+    themeSwitchProps,
+  };
+}