Implement Readonly Editor

.gitignore

@@ -30,6 +30,10 @@ tests-examples
 *.csv
 
 /editor/*
+!/editor/utils/
+!/editor/readonly-editor.tsx
+!/editor/utils/roadmap.ts
+!/editor/utils/is-mobile.ts
 /renderer/*
 !/renderer/index.tsx
 !/renderer/renderer.ts

editor/readonly-editor.tsx

@@ -0,0 +1,14 @@
+export function ReadonlyEditor(props: any) {
+  return (
+    <div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black">
+      <h2 className="mb-2 text-xl font-semibold">Private Component</h2>
+      <p className="mb-4">
+        Renderer is a private component. If you are a collaborator and have
+        access to it. Run the following command:
+      </p>
+      <code className="mt-5 rounded-md bg-gray-800 p-2 text-white">
+        npm run generate-renderer
+      </code>
+    </div>
+  );
+}

editor/utils/is-mobile.ts

@@ -0,0 +1,27 @@
+export function isAndroid(): boolean {
+  return (
+    typeof navigator !== 'undefined' && /android/i.test(navigator.userAgent)
+  );
+}
+
+export function isSmallIOS(): boolean {
+  return (
+    typeof navigator !== 'undefined' && /iPhone|iPod/.test(navigator.userAgent)
+  );
+}
+
+export function isLargeIOS(): boolean {
+  return (
+    typeof navigator !== 'undefined' &&
+    (/iPad/.test(navigator.userAgent) ||
+      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1))
+  );
+}
+
+export function isIOS(): boolean {
+  return isSmallIOS() || isLargeIOS();
+}
+
+export function isMobile(): boolean {
+  return isAndroid() || isIOS();
+}

editor/utils/roadmap.ts

@@ -0,0 +1,17 @@
+export const INITIAL_MOBILE_ZOOM = 0.45;
+export const MINIMUM_MOBILE_ZOOM = 0.2;
+export const INITIAL_DESKTOP_ZOOM = 1;
+export const MINIMUM_DESKTOP_ZOOM = 0.75;
+
+export function centerRoadmap(options: any) {
+  return;
+}
+
+export function calculateDimensions(options: any) {
+  return {
+    x: 0,
+    y: 0,
+    measuredWidth: 0,
+    measuredHeight: 0,
+  };
+}

src/components/CustomRoadmap/FlowRoadmapRenderer.tsx

@@ -140,7 +140,7 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
         height: measuredHeight * initialZoom,
       }}
       className="min-h-[400px]"
-      onRendered={(wrapperRef) => {
+      onRendered={() => {
         renderResourceProgress('roadmap', roadmapId).then(() => {});
       }}
       onTopicClick={handleTopicClick}

src/components/TeamProgress/MemberCustomProgressModal.tsx

@@ -5,6 +5,7 @@ import {
   type MouseEvent,
   useMemo,
   useRef,
+  type RefObject,
 } from 'react';
 import { Spinner } from '../ReactIcons/Spinner';
 import '../FrameRenderer/FrameRenderer.css';
@@ -369,7 +370,7 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
                   initial: initialZoom,
                 }}
                 className="min-h-[400px]"
-                onRendered={(wrapperRef) => {
+                onRendered={() => {
                   const {
                     removed = [],
                     done = [],
@@ -388,9 +389,6 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
                     renderTopicProgress(id, 'removed')
                   );
                 }}
-                onTopicClick={(e) => {
-                  e.preventDefault();
-                }}
                 onTopicRightClick={handleTopicRightClick}
                 onTopicShiftClick={handleTopicShiftClick}
                 onTopicAltClick={handleTopicAltClick}

src/components/UserProgress/UserCustomProgressModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { useKeydown } from '../../hooks/use-keydown';
 import { httpGet } from '../../lib/http';
@@ -271,7 +271,7 @@ export function UserCustomProgressModal(props: ProgressMapProps) {
                 initial: initialZoom,
               }}
               className="min-h-[400px]"
-              onRendered={(wrapperRef) => {
+              onRendered={(wrapperRef: RefObject<HTMLDivElement>) => {
                 const {
                   done = [],
                   learning = [],