From c107ce6d5d6056715b211013ee09f132eae8ec95 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Thu, 12 Oct 2023 23:30:19 +0600
Subject: [PATCH] Implement Readonly Editor

---
 .gitignore                                    |  4 +++
 editor/readonly-editor.tsx                    | 14 ++++++++++
 editor/utils/is-mobile.ts                     | 27 +++++++++++++++++++
 editor/utils/roadmap.ts                       | 17 ++++++++++++
 .../CustomRoadmap/FlowRoadmapRenderer.tsx     |  2 +-
 .../MemberCustomProgressModal.tsx             |  6 ++---
 .../UserProgress/UserCustomProgressModal.tsx  |  4 +--
 7 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 editor/readonly-editor.tsx
 create mode 100644 editor/utils/is-mobile.ts
 create mode 100644 editor/utils/roadmap.ts

diff --git a/.gitignore b/.gitignore
index 229e5e129..f8ef7df50 100644
--- a/.gitignore
+++ b/.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
\ No newline at end of file
diff --git a/editor/readonly-editor.tsx b/editor/readonly-editor.tsx
new file mode 100644
index 000000000..3dd7039af
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/editor/utils/is-mobile.ts b/editor/utils/is-mobile.ts
new file mode 100644
index 000000000..914b4b401
--- /dev/null
+++ b/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();
+}
diff --git a/editor/utils/roadmap.ts b/editor/utils/roadmap.ts
new file mode 100644
index 000000000..2621608ac
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/src/components/CustomRoadmap/FlowRoadmapRenderer.tsx b/src/components/CustomRoadmap/FlowRoadmapRenderer.tsx
index b16a4a3a3..48a2993dd 100644
--- a/src/components/CustomRoadmap/FlowRoadmapRenderer.tsx
+++ b/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}
diff --git a/src/components/TeamProgress/MemberCustomProgressModal.tsx b/src/components/TeamProgress/MemberCustomProgressModal.tsx
index 195f68aee..56bf7babd 100644
--- a/src/components/TeamProgress/MemberCustomProgressModal.tsx
+++ b/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}
diff --git a/src/components/UserProgress/UserCustomProgressModal.tsx b/src/components/UserProgress/UserCustomProgressModal.tsx
index 6de05e1fe..52e489230 100644
--- a/src/components/UserProgress/UserCustomProgressModal.tsx
+++ b/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 = [],