A lot of improvements (QR Scanner, other)

Author: k.golikov

_scripts/commands/createPage.ts

@@ -10,13 +10,13 @@ const pagesDirectoryPath = path.resolve(appRootPath, 'src/pages');
 const getTsxContent = (pageName: string): string => {
     return `
 import React, { FunctionComponent } from 'react';
-import PageContainer from '../../components/pageContainer/PageContainer';
+import PageContainer from '../../layouts/pages/pageContainer/PageContainer';
 import styles from './${pageName}.module.scss';
 
 const ${pageName}: FunctionComponent = () => {
     return (
         <PageContainer title="${pageName}">
-
+            
         </PageContainer>
     );
 };

package.json

@@ -11,6 +11,7 @@
         "antd-img-crop": "^4.2.0",
         "axios": "^0.26.1",
         "bootstrap": "^5.1.3",
+        "canvg": "^4.0.0",
         "classnames": "^2.3.1",
         "immer": "^9.0.12",
         "konva": "^8.3.5",

src/components/MonacoLanguageSelect.tsx

@@ -0,0 +1,18 @@
+import React, { FunctionComponent } from 'react';
+import { monacoLanguages } from '../types/MonacoLanguage';
+import { Select, SelectProps } from 'antd';
+
+type Props = SelectProps;
+
+const MonacoLanguageSelect: FunctionComponent<Props> = ({ children, ...props }) => {
+    return (
+        <Select {...props}>
+            {monacoLanguages.map((language) => (
+                <Select.Option key={language}>{language}</Select.Option>
+            ))}
+            {children}
+        </Select>
+    );
+};
+
+export default MonacoLanguageSelect;

src/components/canvasImage/CanvasImage.tsx

@@ -0,0 +1,18 @@
+import React, { FunctionComponent, ReactNode } from 'react';
+import ContentTransformer from '../contentTransformer/ContentTransformer';
+
+const transform = (element: Element): ReactNode => {
+    if (!(element instanceof HTMLCanvasElement)) {
+        throw new Error('element is not a canvas');
+    }
+
+    const { width, height } = window.getComputedStyle(element);
+
+    return <img src={element.toDataURL()} width={Number.parseInt(width)} height={Number.parseInt(height)} />;
+};
+
+const CanvasImage: FunctionComponent = ({ children }) => {
+    return <ContentTransformer transform={transform}>{children}</ContentTransformer>;
+};
+
+export default CanvasImage;

src/components/canvasRenderer/CanvasRenderer.tsx

@@ -0,0 +1,46 @@
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import { useMutationObserver } from 'rooks';
+
+interface Props {
+    onContentChange: (transformingElement: Element, canvas: HTMLCanvasElement) => (() => void) | void;
+    children?: ReactNode;
+}
+
+function CanvasRenderer({ onContentChange, children }: Props) {
+    const childrenWrapperRef = useRef<HTMLDivElement>(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    const handleChildrenMutation = useCallback(() => {
+        const { current } = childrenWrapperRef;
+
+        if (!current) {
+            return;
+        }
+
+        const transformingElement = current.children?.[0];
+
+        if (!transformingElement) {
+            return;
+        }
+
+        if (!canvasRef.current) {
+            throw new Error('no canvas');
+        }
+
+        return onContentChange(transformingElement, canvasRef.current);
+    }, [onContentChange]);
+
+    useEffect(handleChildrenMutation, [handleChildrenMutation]);
+    useMutationObserver(childrenWrapperRef, handleChildrenMutation);
+
+    return (
+        <>
+            <canvas ref={canvasRef} />
+            <div ref={childrenWrapperRef} className="d-none">
+                {children}
+            </div>
+        </>
+    );
+}
+
+export default CanvasRenderer;

src/components/contentTransformer/ContentTransformer.tsx

@@ -0,0 +1,43 @@
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { useMutationObserver } from 'rooks';
+
+interface Props {
+    transform: (element: Element) => ReactNode;
+    children?: ReactNode;
+}
+
+function ContentTransformer({ transform, children }: Props) {
+    const childrenWrapperRef = useRef<HTMLDivElement>(null);
+
+    const [transformedElement, setTransformedElement] = useState<ReactNode>();
+
+    const handleChildrenMutation = useCallback(() => {
+        const { current } = childrenWrapperRef;
+
+        if (!current) {
+            return;
+        }
+
+        const transformingElement = current.children?.[0];
+
+        if (!transformingElement) {
+            return;
+        }
+
+        setTransformedElement(transform(transformingElement));
+    }, [transform]);
+
+    useEffect(handleChildrenMutation, [handleChildrenMutation]);
+    useMutationObserver(childrenWrapperRef, handleChildrenMutation);
+
+    return (
+        <>
+            {transformedElement}
+            <div ref={childrenWrapperRef} className="d-none">
+                {children}
+            </div>
+        </>
+    );
+}
+
+export default ContentTransformer;

src/components/svgCanvas/SvgCanvas.tsx

@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from 'react';
+import { Canvg } from 'canvg';
+import serializeXmlNode from '../../utils/serializeXmlNode';
+import CanvasRenderer from '../canvasRenderer/CanvasRenderer';
+
+const handleContentChange = (element: Element, canvas: HTMLCanvasElement) => {
+    const svgString = serializeXmlNode(element);
+
+    const canvasContext = canvas.getContext('2d');
+
+    if (!canvasContext) {
+        throw new Error('no canvas context');
+    }
+
+    const canvg = Canvg.fromString(canvasContext, svgString);
+    canvg.start();
+
+    return () => {
+        canvg.stop();
+    };
+};
+
+const SvgCanvas: FunctionComponent = ({ children }) => {
+    return <CanvasRenderer onContentChange={handleContentChange}>{children}</CanvasRenderer>;
+};
+
+export default SvgCanvas;

src/components/svgImage/SvgImage.tsx

@@ -1,43 +1,17 @@
-import React, { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
-import { useMutationObserver } from 'rooks';
+import React, { FunctionComponent } from 'react';
+import ContentTransformer from '../contentTransformer/ContentTransformer';
+import serializeXmlNode from '../../utils/serializeXmlNode';
 
-const xmlSerializer = new XMLSerializer();
+const transform = (element: Element) => {
+    const svgString = serializeXmlNode(element);
+    const svgBase64 = window.btoa(svgString);
+    const src = 'data:image/svg+xml;base64,' + svgBase64;
 
-const SvgImage: FunctionComponent = ({ children }) => {
-    const childrenWrapperRef = useRef<HTMLDivElement>(null);
-
-    const [svgSource, setSvgSource] = useState<string>();
-
-    const handleChildrenMutation = useCallback(() => {
-        const { current } = childrenWrapperRef;
-
-        if (!current) {
-            return;
-        }
-
-        const svgElement = current.querySelector('svg');
-
-        if (!svgElement) {
-            return;
-        }
-
-        const svgString = xmlSerializer.serializeToString(svgElement);
-        const svgBase64 = window.btoa(svgString);
-        const svgSource = 'data:image/svg+xml;base64,' + svgBase64;
-        setSvgSource(svgSource);
-    }, []);
-
-    useEffect(handleChildrenMutation, []);
-    useMutationObserver(childrenWrapperRef, handleChildrenMutation);
+    return <img src={src} />;
+};
 
-    return (
-        <>
-            <div ref={childrenWrapperRef} className="d-none">
-                {children}
-            </div>
-            <img src={svgSource} />
-        </>
-    );
+const SvgImage: FunctionComponent = ({ children }) => {
+    return <ContentTransformer transform={transform}>{children}</ContentTransformer>;
 };
 
 export default SvgImage;

src/constants/router/menuItems.ts

@@ -61,6 +61,9 @@ const menuItems: MenuItem[] = [
             {
                 route: routes.notificationsTest
             },
+            {
+                route: routes.imageCompressor
+            },
             {
                 route: routes.dateUtils,
                 isGray: true

src/constants/router/routes.tsx

@@ -24,6 +24,7 @@ import DiffEditorPage from '../../pages/diffEditorPage/DiffEditorPage';
 import JsonToTypeScriptPage from '../../pages/jsonToTypeScriptPage/JsonToTypeScriptPage';
 import NotificationsTestPage from '../../pages/notificationsTestPage/NotificationsTestPage';
 import DateUtilsPage from '../../pages/dateUtilsPage/DateUtilsPage';
+import ImageCompressorPage from '../../pages/imageCompressorPage/ImageCompressorPage';
 
 export interface AppRoute extends Omit<RouteProps, 'element'> {
     path: string;
@@ -51,6 +52,7 @@ type AppRoutesMap = Readonly<{
     jsonToTypescript: AppRoute;
     notificationsTest: AppRoute;
     dateUtils: AppRoute;
+    imageCompressor: AppRoute;
     settings: AppRoute;
     about: AppRoute;
 }>;
@@ -151,6 +153,11 @@ export const routes: AppRoutesMap = {
         component: DateUtilsPage,
         title: 'Date Utils'
     },
+    imageCompressor: {
+        path: '/tools/image-compressor',
+        component: ImageCompressorPage,
+        title: 'Image Compressor'
+    },
     settings: {
         path: '/settings',
         component: SettingsPage,