Merge pull request #56 from tomobre/feature/roadmap

Feature/roadmap

.prettierignore

@@ -1,4 +1,6 @@
 # Ignore .next
 .next
 .git
-node_modules
+node_modules
+assets/svgs
+public/svgs

assets/svgs/cross.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174L21.03-.046l-9.09 9.179L2.764.045l-2.81 2.81L9.14 11.96.045 21.144l2.81 2.81 9.112-9.192 9.18 9.1z"/></svg>

assets/svgs/loader.svg

@@ -0,0 +1,2 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="currentColor"><g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></svg>

components/HomeHeroBubble.tsx

@@ -5,14 +5,14 @@ import { useContext } from 'react';
 import { useDispatch } from 'react-redux';
 
 export function HomeHeroBubble() {
-  const { isMobile, isTablet, isDesktop, isHuge } = useContext(ScreenContext);
+  const { isMobile, isTablet, isDesktop, isHuge, isEnormous } = useContext(ScreenContext);
   const dispatch = useDispatch();
 
   return (
     <div
       style={{
         marginTop:
-          isMobile || isTablet ? '33px' : isHuge ? '16rem' : 'min(50vh, 20rem)',
+          (isMobile || isTablet) ? '33px' : (isHuge || isEnormous) ? '16rem' : 'min(50vh, 20rem)',
       }}
       onClick={() => dispatch(expandSideMenu())}
       className={classNames(

components/cards/CardGrid.tsx

@@ -14,7 +14,7 @@ interface Props {
 }
 
 export function CardGrid({ rows, children }: Props) {
-  const { isDesktop, isHuge } = useContext(ScreenContext);
+  const { isDesktop, isHuge, isEnormous } = useContext(ScreenContext);
 
   const [ref, { width }] = useMeasure();
   const widthOfCardPx = 200;
@@ -22,7 +22,7 @@ export function CardGrid({ rows, children }: Props) {
   const numPaddingCards =
     Math.ceil(children.length / grouping) * grouping - children.length;
 
-  const spacing = isHuge ? 3 : isDesktop ? 6 : 4;
+  const spacing = (isHuge || isEnormous) ? 3 : isDesktop ? 6 : 4;
   const spacingY = `space-y-${spacing}`;
   const spacingX = `space-x-${spacing}`;
 

components/navigation/SideMenuInner.tsx

@@ -24,7 +24,7 @@ import { useRouter } from 'next/router';
 import { v4 as uuid } from 'uuid';
 
 export function SideMenuInner() {
-  const { isHuge, isDesktop } = useContext(ScreenContext);
+  const { isDesktop } = useContext(ScreenContext);
   const { pages } = useSelector((state: IState) => state.navigation);
   const dispatch = useDispatch();
   const router = useRouter();

components/navigation/SideMenuRow.tsx

@@ -16,7 +16,9 @@ interface SideMenuRowProps {
 }
 
 export function SideMenuRow({ item, isActive }: SideMenuRowProps) {
-  const { isMobile, isTablet, isDesktop, isHuge } = useContext(ScreenContext);
+  const { isMobile, isTablet, isDesktop, isHuge, isEnormous } = useContext(
+    ScreenContext,
+  );
   const isCollapsible = isTablet || isMobile;
   const dispatch = useDispatch();
 
@@ -41,7 +43,7 @@ export function SideMenuRow({ item, isActive }: SideMenuRowProps) {
       }}
       className={classNames(
         'flex flex-1 space-x-6 justify-between text-primary items-center cursor-pointer border-b border-black py-4 hover:bg-secondary duration-300 whitespace-nowrap',
-        isHuge ? 'text-2xl' : isDesktop ? 'text-xl' : 'text-xl',
+        (isHuge || isEnormous) ? 'text-2xl' : isDesktop ? 'text-xl' : 'text-xl',
         isActive ? 'bg-secondary' : 'bg-transparent',
         item.shouldHide ? 'hidden' : '',
       )}

components/navigation/SideMenuSideBar.tsx

@@ -19,7 +19,7 @@ interface Props {
 }
 
 export function SideMenuSideBar({ mode }: Props) {
-  const { isMobile, isTablet, isHuge } = useContext(ScreenContext);
+  const { isMobile, isTablet, isHuge, isEnormous } = useContext(ScreenContext);
   const { sideMenuExpanded: expanded, pageType, postTitle } = useSelector(
     (state: IState) => state.navigation,
   );

constants/metadata.tsx

@@ -75,6 +75,13 @@ const METADATA = {
   },
   ROADMAP_PAGE: {
     DESCRIPTION: "View Oxen's plan for the future here.",
+    OG_IMAGE: {
+      URL: '/img/roadmap-preview.png',
+      WIDTH: 1503,
+      HEIGHT: 755,
+      ALT:
+        'Blurred background of the Oxen roadmap with the words progress tree',
+    },
   },
   FAQ_PAGE: {
     DESCRIPTION: 'View Some Frequently Asked Questions here',

constants/ui.ts

@@ -2,6 +2,8 @@ const UI = {
   MOBILE_BREAKPOINT: 500,
   TABLET_BREAKPOINT: 850,
   DESKTOP_BREAKPOINT: 1100,
+  MONITOR_BREAKPOINT: 1920,
+  
   MAX_CONTENT_WIDTH: 1100,
   MAX_ARTICLE_WIDTH: 900,
   PAGE_CONTAINED_PADDING_VW: 5,

contexts/screen.tsx

@@ -6,6 +6,7 @@ interface IScreen {
   isTablet: boolean;
   isDesktop: boolean;
   isHuge: boolean;
+  isEnormous: boolean;
   width: number;
 }
 
@@ -14,6 +15,7 @@ export const ScreenContext = React.createContext({
   isTablet: false,
   isDesktop: false,
   isHuge: false,
+  isEnormous: false,
   width: 0,
 });
 

hooks/screen.ts

@@ -12,19 +12,23 @@ export function useScreenSize() {
   const [isTablet, setIsTablet] = useState(false);
   const [isDesktop, setIsDesktop] = useState(false);
   const [isHuge, setIsHuge] = useState(false);
+  const [isEnormous, setIsEnormous] = useState(false);
 
   useEffect(() => {
     const _isMobile = width <= UI.MOBILE_BREAKPOINT;
     const _isTablet =
       width > UI.MOBILE_BREAKPOINT && width <= UI.TABLET_BREAKPOINT;
     const _isDesktop = width > UI.TABLET_BREAKPOINT;
-    const _isHuge = width > UI.DESKTOP_BREAKPOINT;
+    const _isHuge =
+      width >= UI.DESKTOP_BREAKPOINT && width < UI.MONITOR_BREAKPOINT;
+    const _isEnormous = width >= UI.MONITOR_BREAKPOINT;
 
     if (isMobile !== _isMobile) setIsMobile(_isMobile);
     if (isTablet !== _isTablet) setIsTablet(_isTablet);
     if (isDesktop !== _isDesktop) setIsDesktop(_isDesktop);
     if (isHuge !== _isHuge) setIsHuge(_isHuge);
-  }, [width]);
+    if (isEnormous !== _isEnormous) setIsEnormous(_isEnormous);
+  }, [isMobile, isTablet, isDesktop, isHuge, isEnormous, width]);
 
-  return { isMobile, isTablet, isDesktop, isHuge, width };
+  return { isMobile, isTablet, isDesktop, isHuge, isEnormous, width };
 }

package.json

@@ -26,6 +26,7 @@
     "next": "11.1.4",
     "next-compose-plugins": "^2.2.1",
     "next-fonts": "^1.5.1",
+    "panzoom": "^9.4.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-paginate": "^7.1.0",
@@ -34,7 +35,7 @@
     "react-use": "^17.1.1",
     "redux": "^4.0.5",
     "rimraf": "^3.0.2",
-    "sharp": "^0.30.1",
+    "sharp": "^0.31.3",
     "uuid": "^8.3.2",
     "xss": "^1.0.9"
   },

pages/404.tsx

@@ -7,14 +7,17 @@ import { ScreenContext } from '@/contexts/screen';
 import classNames from 'classnames';
 
 export default function Custom404(): ReactElement {
-  const { isMobile, isTablet, isDesktop, isHuge } = useContext(ScreenContext);
+  const { isMobile, isTablet, isDesktop, isHuge, isEnormous } = useContext(
+    ScreenContext,
+  );
 
   const wrapperStyles = {
     width: '100%',
     maxWidth: '760px',
     margin: isDesktop ? '50px auto 100px' : '-10px auto',
-    paddingLeft: isHuge ? '0' : `${UI.PAGE_CONTAINED_PADDING_VW}vw`,
-    paddingRight: isHuge ? '0' : `${UI.PAGE_CONTAINED_PADDING_VW}vw`,
+    paddingLeft:
+      (isHuge || isEnormous) ? '0' : `${UI.PAGE_CONTAINED_PADDING_VW}vw`,
+    paddingRight: (isHuge || isEnormous) ? '0' : `${UI.PAGE_CONTAINED_PADDING_VW}vw`,
     paddingBottom: !isDesktop ? '33px' : '0px',
   };
 

pages/roadmap.tsx

@@ -1,39 +1,226 @@
-import { METADATA, NAVIGATION } from '@/constants';
+import { METADATA, NAVIGATION, UI } from '@/constants';
+import React, {
+  ReactElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 
 import CustomHead from '@/components/CustomHead';
-import Image from 'next/image';
+import { ReactComponent as LoadingSVG } from '@/assets/svgs/loader.svg';
+import { ScreenContext } from '@/contexts/screen';
 import { SideMenuItem } from '@/state/navigation';
 import classNames from 'classnames';
+import panzoom from 'panzoom';
+
+let pz = null; // global panzoom instance
+
+type RoadmapCanvasProps = {
+  loaded: boolean;
+  canScaleMore: boolean;
+  showExplanation: boolean;
+  setShowExplanation: any;
+  isMobileDisplay: boolean;
+};
+
+const RoadmapCanvas = (props: RoadmapCanvasProps): ReactElement => {
+  const {
+    loaded,
+    canScaleMore,
+    showExplanation,
+    setShowExplanation,
+    isMobileDisplay,
+  } = props;
+
+  return (
+    <div
+      className={classNames(
+        'relative',
+        loaded ? 'visibility' : 'invisible',
+        isMobileDisplay && 'bg-tertiary',
+      )}
+      style={{
+        height: loaded ? `calc(100vh - ${UI.HEADER_HEIGHT_PX}px)` : '0vh',
+      }}
+    >
+      {!isMobileDisplay && (
+        <canvas
+          id={'#roadmap-image'}
+          aria-label={"Oxen's roadmap for the future shown as a progress tree"}
+          className={classNames('cursor-move z-0')}
+          // upscaled for better text rendering
+          // mobile and tablets have smaller upscale limit
+          width={3686 * (canScaleMore ? 1.75 : 1.45)}
+          height={2073 * (canScaleMore ? 1.75 : 1.45)}
+        />
+      )}
+      {loaded && showExplanation && (
+        <div
+          className={classNames(
+            'relative flex justify-center items-center cursor-pointer',
+            'tablet:absolute tablet:block tablet:left-6 tablet:bottom-6',
+          )}
+          style={{
+            height: isMobileDisplay ? '100%' : 304.8,
+            width: isMobileDisplay ? '100%' : 313.6,
+          }}
+          onClick={() => {
+            setShowExplanation(false);
+          }}
+        >
+          {/* eslint-disable @next/next/no-img-element */}
+          <img
+            src={'/svgs/roadmap-explanation.svg'}
+            alt="Oxen Roadmap Explanation"
+            height={isMobileDisplay ? '100%' : 762 / 2.5}
+            width={isMobileDisplay ? '100%' : 784 / 2.5}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default function Roadmap() {
+  const { isMobile, isTablet, isHuge, isEnormous } = useContext(ScreenContext);
+  const [loaded, setLoaded] = useState(false);
+  const [showExplanation, setShowExplanation] = useState(true);
+
+  const startup = useCallback(() => {
+    if (isMobile && showExplanation) {
+      console.log('mobile popup loaded');
+      setLoaded(true);
+      return;
+    }
+
+    const canvasHolder = document.getElementById(
+      '#roadmap-image',
+    ) as HTMLCanvasElement;
+    const context = canvasHolder.getContext('2d');
+    const backgroundImage = new Image();
+    backgroundImage.src = '/svgs/roadmap.svg';
+
+    backgroundImage.onload = function () {
+      context.drawImage(
+        backgroundImage,
+        0,
+        0,
+        canvasHolder.width,
+        canvasHolder.height,
+      );
+      context.save();
+
+      console.log('roadmap loaded');
+      setLoaded(true);
+    };
+  }, [isMobile, showExplanation]);
+
+  useEffect(() => {
+    startup();
+
+    if (loaded && !(isMobile && showExplanation)) {
+      const roadmapEl = document.getElementById('#roadmap-image');
+      pz = panzoom(roadmapEl, {
+        initialZoom: isMobile
+          ? 0.3
+          : isTablet
+          ? 0.4
+          : isHuge
+          ? 0.3333
+          : isEnormous
+          ? 0.6
+          : 0.25,
+        minZoom: isMobile
+          ? 0.07
+          : isTablet
+          ? 0.125
+          : isHuge
+          ? 0.12
+          : isEnormous
+          ? 0.2
+          : 0.1,
+        autocenter: false,
+        initialX: isMobile
+          ? -900
+          : isTablet
+          ? -1200
+          : isHuge
+          ? -800
+          : isEnormous
+          ? -2200
+          : -600,
+        initialY: isMobile
+          ? -100
+          : isTablet
+          ? -200
+          : isHuge
+          ? -100
+          : isEnormous
+          ? -300
+          : -100,
+        bounds: true,
+        boundsPadding: isMobile ? 0 : isTablet ? 0 : -0.1,
+      });
+    }
+
+    () => {
+      if (loaded && pz) {
+        pz.dispose();
+      }
+    };
+  }, [
+    isMobile,
+    isTablet,
+    isHuge,
+    isEnormous,
+    loaded,
+    startup,
+    showExplanation,
+  ]);
 
-function Roadmap() {
   return (
     <>
       <CustomHead
         title={NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].label}
         metadata={METADATA.ROADMAP_PAGE}
       />
-      <div className="w-full h-full">
-        <div className="flex flex-col px-6 py-6 space-y-10">
-          <div
+      {!loaded && (
+        <div
+          className={classNames('flex justify-center items-center w-100')}
+          title="loading"
+          style={{
+            height: `calc(100vh - ${UI.HEADER_HEIGHT_PX}px)`,
+          }}
+        >
+          <LoadingSVG
             className={classNames(
-              'relative w-full mx-auto',
-              'desktop:max-w-3xl',
+              'w-48 h-48 mx-auto text-primary fill-current -mt-8',
+              'tablet:-mt-32',
             )}
-          >
-            <Image
-              src={`/img/roadmap.webp`}
-              alt="Oxen's Roadmap and Plans for the future."
-              width={1920}
-              height={3528}
-              layout="responsive"
-              quality={100}
-              priority={true}
+          />
+        </div>
+      )}
+      <RoadmapCanvas
+        loaded={loaded}
+        canScaleMore={!isMobile && !isTablet}
+        showExplanation={showExplanation}
+        setShowExplanation={setShowExplanation}
+        isMobileDisplay={isMobile && showExplanation}
+      />
+      {!(isMobile && showExplanation) && loaded && (
+        <>
+          <div className={classNames('z-10 absolute right-6 bottom-6')}>
+            {/* eslint-disable @next/next/no-img-element */}
+            <img
+              src={'/svgs/roadmap-key.svg'}
+              alt="Oxen Roadmap Legend"
+              height={isMobile ? 180 : 242}
+              width={isMobile ? 150 : 200}
             />
           </div>
-        </div>
-      </div>
+        </>
+      )}
     </>
   );
 }
-
-export default Roadmap;

tailwind.config.js

@@ -48,6 +48,7 @@ module.exports = {
       colors: {
         primary: '#1F1C47',
         secondary: '#12C7BA',
+        tertiary: '#181436',
         alt: '#DBF7F5',
         hyper: '#E5FF85',
         blush: '#FF7A87',

yarn.lock

@@ -2677,6 +2677,13 @@ alphanum-sort@^1.0.0:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
+amator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/amator/-/amator-1.1.0.tgz#08c6b60bc93aec2b61bbfc0c4d677d30323cc0f1"
+  integrity sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==
+  dependencies:
+    bezier-easing "^2.0.3"
+
 anser@1.4.9:
   version "1.4.9"
   resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.9.tgz#1f85423a5dcf8da4631a341665ff675b96845760"
@@ -2792,19 +2799,11 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-aproba@^1.0.3, aproba@^1.1.1:
+aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
   integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
-are-we-there-yet@~1.1.2:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz#b15474a932adab4ff8a50d9adfa7e4e926f21146"
-  integrity sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
-
 arg@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
@@ -3308,6 +3307,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+bezier-easing@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
+  integrity sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==
+
 bfj@^5.2.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/bfj/-/bfj-5.3.1.tgz#4af90fb3d0513cab1f7e623f5636ae3d21931529"
@@ -4194,10 +4198,10 @@ color@^4.0.1:
     color-convert "^2.0.1"
     color-string "^1.6.0"
 
-color@^4.2.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/color/-/color-4.2.1.tgz#498aee5fce7fc982606c8875cab080ac0547c884"
-  integrity sha512-MFJr0uY4RvTQUKvPq7dh9grVOTYSFeXja2mBXioCGjnjJoXrAp9jJ1NQTDR73c9nwBSAQiNKloKl5zq9WB9UPw==
+color@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
   dependencies:
     color-convert "^2.0.1"
     color-string "^1.9.0"
@@ -4321,11 +4325,6 @@ console-browserify@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
   integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
 
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
-
 constants-browserify@1.0.0, constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -5230,11 +5229,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
-
 depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@@ -5253,7 +5247,7 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
-detect-libc@^2.0.0:
+detect-libc@^2.0.0, detect-libc@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd"
   integrity sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==
@@ -6829,20 +6823,6 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-gauge@~2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
-  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
-  dependencies:
-    aproba "^1.0.3"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.0"
-    object-assign "^4.1.0"
-    signal-exit "^3.0.0"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wide-align "^1.1.0"
-
 gensync@^1.0.0-beta.1:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -7153,11 +7133,6 @@ has-tostringtag@^1.0.0:
   dependencies:
     has-symbols "^1.0.2"
 
-has-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
-
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
@@ -10008,6 +9983,11 @@ next@11.1.4:
     "@next/swc-linux-x64-gnu" "11.1.4"
     "@next/swc-win32-x64-msvc" "11.1.4"
 
+ngraph.events@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/ngraph.events/-/ngraph.events-1.2.2.tgz#3ceb92d676a04a4e7ce60a09fa8e17a4f0346d7f"
+  integrity sha512-JsUbEOzANskax+WSYiAPETemLWYXmixuPAlmZmhIbIj6FH/WDgEGCGnRwUQBK0GjOnVm8Ui+e5IJ+5VZ4e32eQ==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -10028,10 +10008,10 @@ node-abi@^3.3.0:
   dependencies:
     semver "^7.3.5"
 
-node-addon-api@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-4.3.0.tgz#52a1a0b475193e0928e98e0426a0d1254782b77f"
-  integrity sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ==
+node-addon-api@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-5.1.0.tgz#49da1ca055e109a23d537e9de43c09cca21eb762"
+  integrity sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==
 
 node-emoji@^1.11.0:
   version "1.11.0"
@@ -10176,16 +10156,6 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
-npmlog@^4.0.1:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
-  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
-  dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
-
 nth-check@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -10612,6 +10582,15 @@ pako@~1.0.5:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
+panzoom@^9.4.3:
+  version "9.4.3"
+  resolved "https://registry.yarnpkg.com/panzoom/-/panzoom-9.4.3.tgz#195c4031bb643f2e6c42f1de0ca87cc10e224042"
+  integrity sha512-xaxCpElcRbQsUtIdwlrZA90P90+BHip4Vda2BC8MEb4tkI05PmR6cKECdqUCZ85ZvBHjpI9htJrZBxV5Gp/q/w==
+  dependencies:
+    amator "^1.1.0"
+    ngraph.events "^1.2.2"
+    wheel "^1.0.0"
+
 parallel-transform@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
@@ -11630,10 +11609,10 @@ postcss@^8.1.0, postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.6:
     nanoid "^3.1.20"
     source-map "^0.6.1"
 
-prebuild-install@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.0.1.tgz#c10075727c318efe72412f333e0ef625beaf3870"
-  integrity sha512-QBSab31WqkyxpnMWQxubYAHR5S9B2+r81ucocew34Fkl98FhvKIF50jIJnNOBmAZfyNV7vE5T6gd3hTVWgY6tg==
+prebuild-install@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
+  integrity sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==
   dependencies:
     detect-libc "^2.0.0"
     expand-template "^2.0.3"
@@ -11642,7 +11621,6 @@ prebuild-install@^7.0.1:
     mkdirp-classic "^0.5.3"
     napi-build-utils "^1.0.1"
     node-abi "^3.3.0"
-    npmlog "^4.0.1"
     pump "^3.0.0"
     rc "^1.2.7"
     simple-get "^4.0.0"
@@ -12207,7 +12185,7 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -12920,6 +12898,13 @@ semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.3.8:
+  version "7.3.8"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
+  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -12976,7 +12961,7 @@ serve-static@1.14.1:
     parseurl "~1.3.3"
     send "0.17.1"
 
-set-blocking@^2.0.0, set-blocking@~2.0.0:
+set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
@@ -13024,16 +13009,16 @@ shallowequal@^1.1.0:
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
 
-sharp@^0.30.1:
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.1.tgz#203efaf9acfc5c15c8a343800254621e56011c12"
-  integrity sha512-ycpz81q8AeVjz1pGvvirQBeJcYE2sXAjcLXR/69LWOe/oxavBLOrenZcTzvTXn83jqAGqY+OuwF+2kFXzbKtDA==
+sharp@^0.31.3:
+  version "0.31.3"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.31.3.tgz#60227edc5c2be90e7378a210466c99aefcf32688"
+  integrity sha512-XcR4+FCLBFKw1bdB+GEhnUNXNXvnt0tDo4WsBsraKymuo/IAuPuCBVAL2wIkUw2r/dwFW5Q5+g66Kwl2dgDFVg==
   dependencies:
-    color "^4.2.0"
-    detect-libc "^2.0.0"
-    node-addon-api "^4.3.0"
-    prebuild-install "^7.0.1"
-    semver "^7.3.5"
+    color "^4.2.3"
+    detect-libc "^2.0.1"
+    node-addon-api "^5.0.0"
+    prebuild-install "^7.1.1"
+    semver "^7.3.8"
     simple-get "^4.0.1"
     tar-fs "^2.1.1"
     tunnel-agent "^0.6.0"
@@ -14951,6 +14936,11 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^6.1.0"
 
+wheel@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wheel/-/wheel-1.0.0.tgz#6cf46e06a854181adb8649228077f8b0d5c574ce"
+  integrity sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA==
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
@@ -14998,7 +14988,7 @@ which@^1.2.9, which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
-wide-align@1.1.3, wide-align@^1.1.0:
+wide-align@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
   integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==