vzcode 0.24.0 → 0.26.0

package/src/client/App.tsx

@@ -9,30 +9,25 @@ import ShareDBClient from 'sharedb-client-browser/dist/sharedb-client-umd.cjs';
 import { json1Presence } from '../ot';
 import { randomId } from '../randomId';
 import { CodeEditor } from './CodeEditor';
-import { diff } from './diff';
-import { Settings } from './Settings';
-import { Sidebar } from './Sidebar';
-import {
-  FileId,
-  Files,
-  ShareDBDoc,
-  VZCodeContent,
-} from '../types';
+import { VZSettings } from './VZSettings';
+import { VZSidebar } from './VZSidebar';
+import { Files, ShareDBDoc, VZCodeContent } from '../types';
 import { TabList } from './TabList';
 import { useOpenDirectories } from './useOpenDirectories';
-import { useTabsState } from './useTabsState';
-import { ThemeLabel, defaultTheme } from './themes';
+import { defaultTheme, useDynamicTheme } from './themes';
 import { useEditorCache } from './useEditorCache';
-import { useDynamicTheme } from './useDynamicTheme';
 import { usePrettier } from './usePrettier';
 // @ts-ignore
 import PrettierWorker from './usePrettier/worker?worker';
 import { SplitPaneResizeProvider } from './SplitPaneResizeContext';
 import { Resizer } from './Resizer';
 import { PresenceNotifications } from './PresenceNotifications';
-import { reducer } from './reducer';
-import './style.scss';
 import { PrettierErrorOverlay } from './PrettierErrorOverlay';
+import { vzReducer } from './vzReducer';
+import { useActions } from './useActions';
+import { useFileCRUD } from './useFileCRUD';
+import './style.scss';
+import { useSubmitOperation } from './useSubmitOperation';
 
 // Instantiate the Prettier worker.
 const prettierWorker = new PrettierWorker();
@@ -58,20 +53,9 @@ function App() {
   const [shareDBDoc, setShareDBDoc] =
     useState<ShareDBDoc<VZCodeContent> | null>(null);
 
-  // A helper function to submit operations to the ShareDB document
-
   const submitOperation: (
     next: (content: VZCodeContent) => VZCodeContent,
-  ) => void = useCallback(
-    (next) => {
-      const content: VZCodeContent = shareDBDoc.data;
-      const op = diff(content, next(content));
-      if (op && shareDBDoc) {
-        shareDBDoc.submitOp(op);
-      }
-    },
-    [shareDBDoc],
-  );
+  ) => void = useSubmitOperation(shareDBDoc);
 
   // Auto-run Pretter after local changes.
   const { prettierError } = usePrettier(
@@ -80,8 +64,6 @@ function App() {
     prettierWorker,
   );
 
-  console.log('prettierError', prettierError);
-
   // Local ShareDB presence, for broadcasting our cursor position
   // so other clients can see it.
   // See https://share.github.io/sharedb/api/local-presence
@@ -123,6 +105,12 @@ function App() {
       // This decouples rendering logic from ShareDB.
       // This callback gets called on each change.
       shareDBDoc.on('op', () => {
+        // TODO consider excluding file contents from this,
+        // because currently we are re-rendering the entire
+        // document on each file change (each keystroke while editing).
+        // This is not required, because no part of the app outside
+        // of the CodeMirror integration uses those file contents.
+        // The Sidebar only needs to know file names, not contents.
         setContent(shareDBDoc.data);
       });
 
@@ -153,76 +141,32 @@ function App() {
     };
   }, []);
 
-  // The id of the currently open file tab.
-  // TODO make this a URL param
-  // Migrated to useReducer
-  //const [activeFileId, setActiveFileId] =
-  //useState<FileId | null>(null);
-
-  // The ordered list of tabs.
-  // TODO make this a URL param
   // https://react.dev/reference/react/useReducer
-  // const [tabList, setTabList] = useState<Array<FileId>>([]);
-  const [state, dispatch] = useReducer(reducer, {
-    submitOperation,
+  const [state, dispatch] = useReducer(vzReducer, {
     tabList: [],
-    // activeFileId: null,
-    // theme: defaultTheme,
-    // isSettingsOpen:false
+    activeFileId: null,
+    theme: defaultTheme,
+    isSettingsOpen: false,
   });
 
-  //Reducer states
-  const tabList = state.tabList;
-  const activeFileId = state.activeFileId;
-  // TODO phase this out as we complete the refactoring
-  // It's here now for backwards compatibility
-  const setTabList = (tabList) => {
-    dispatch({
-      type: 'set_tab_list',
-      tabList,
-    });
-  };
-
-  const setActiveFileId = (activeFileId) => {
-    dispatch({
-      type: 'set_active_fileId',
-      activeFileId,
-    });
-  };
-  const openTab = (fileId: FileId) => {
-    dispatch({
-      type: 'open_tab',
-      fileId,
-    });
-  };
-
-  const closeTab = (fileIdToRemove: FileId) => {
-    dispatch({
-      type: 'close_tab',
-      fileIdToRemove,
-    });
-  };
-
-  const multiCloseTab = (idsToDelete: Array<FileId>) => {
-    dispatch({
-      type: 'multi_close_tab',
-      idsToDelete,
-    });
-  };
+  // Unpack state.
+  const { tabList, activeFileId, theme, isSettingsOpen } =
+    state;
 
-  // Logic for opening and closing tabs. Migrated to useReducer
-  /*
-  const {} = useTabsState(
-    activeFileId,
+  // Functions for dispatching actions to the reducer.
+  const {
     setActiveFileId,
-    tabList,
-    setTabList,
-  ); */
+    openTab,
+    closeTabs,
+    setTheme,
+    setIsSettingsOpen,
+    closeSettings,
+  } = useActions(dispatch);
 
-  // The current theme.
-  // TODO persist this in local storage
-  const [theme, setTheme] =
-    useState<ThemeLabel>(defaultTheme);
+  // The set of open directories.
+  // TODO move this into reducer/useActions
+  const { isDirectoryOpen, toggleDirectory } =
+    useOpenDirectories();
 
   // Cache of CodeMirror editors by file id.
   const editorCache = useEditorCache();
@@ -230,123 +174,12 @@ function App() {
   // Handle dynamic theme changes.
   useDynamicTheme(editorCache, theme);
 
-  // True to show the settings modal.
-  const [isSettingsOpen, setIsSettingsOpen] =
-    useState(false);
-
-  // The set of open directories.
-  const { isDirectoryOpen, toggleDirectory } =
-    useOpenDirectories();
-
-  // TODO move this logic to a hook called `useFileCRUD`
-  // Include
-  //  - `createFile`
-  //  - `handleRenameFileClick`
-  //  - `deleteFile`
-  //  - `handleDeleteFileClick`
-  const createFile = useCallback(() => {
-    const name = prompt('Enter new file name');
-    if (name) {
-      submitOperation((document) => ({
-        ...document,
-        files: {
-          ...document.files,
-          [randomId()]: { name, text: '' },
-        },
-      }));
-    }
-  }, [submitOperation]);
-
-  // Called when a file in the sidebar is renamed.
-  const handleRenameFileClick = useCallback(
-    (fileId: FileId, newName: string) => {
-      submitOperation((document) => ({
-        ...document,
-        files: {
-          ...document.files,
-          [fileId]: {
-            ...document.files[fileId],
-            name: newName,
-          },
-        },
-      }));
-    },
-    [submitOperation],
-  );
-
-  const deleteFile = useCallback(
-    (fileId: FileId) => {
-      submitOperation((document) => {
-        const updatedFiles = { ...document.files };
-        delete updatedFiles[fileId];
-        return { ...document, files: updatedFiles };
-      });
-      closeTab(fileId);
-    },
-    [submitOperation, closeTab],
-  );
-
-  const deleteDirectory = useCallback(
-    (path: FileId) => {
-      let tabsToDelete: Array<FileId> = [];
-      submitOperation((document) => {
-        const updatedFiles = { ...document.files };
-        for (const key in updatedFiles) {
-          if (updatedFiles[key].name.includes(path)) {
-            tabsToDelete.push(key);
-            delete updatedFiles[key];
-          }
-        }
-        return { ...document, files: updatedFiles };
-      });
-      multiCloseTab(tabsToDelete);
-    },
-    [submitOperation, multiCloseTab],
-  );
-
-  const handleDeleteClick = useCallback(
-    (key: string) => {
-      //Regex to identify if the key is a file path or a file id.
-      if (/^[0-9]*$/.test(key)) {
-        if (key.length == 8) {
-          deleteFile(key);
-        } else {
-          deleteDirectory(key);
-        }
-      } else {
-        deleteDirectory(key);
-      }
-    },
-    [deleteFile, deleteDirectory],
-  );
-
-  const handleSettingsClose = useCallback(() => {
-    setIsSettingsOpen(false);
-  }, []);
-
-  // Set `doc.data.isInteracting` to `true` when the user is interacting
-  // via interactive code widgets (e.g. Alt+drag), and `false` when they are not.
-  const interactTimeoutRef = useRef(null);
-  const handleInteract = useCallback(() => {
-    // Set `isInteracting: true` if not already set.
-    if (!interactTimeoutRef.current) {
-      submitOperation((document) => ({
-        ...document,
-        isInteracting: true,
-      }));
-    } else {
-      clearTimeout(interactTimeoutRef.current);
-    }
-
-    // Set `isInteracting: false` after a delay.
-    interactTimeoutRef.current = setTimeout(() => {
-      interactTimeoutRef.current = null;
-      submitOperation((document) => ({
-        ...document,
-        isInteracting: false,
-      }));
-    }, 800);
-  }, [submitOperation]);
+  // Handle file CRUD operations.
+  const {
+    createFile,
+    handleRenameFileClick,
+    handleDeleteClick,
+  } = useFileCRUD({ submitOperation, closeTabs });
 
   // Isolate the files object from the document.
   const files: Files | null = content
@@ -357,7 +190,7 @@ function App() {
     <SplitPaneResizeProvider>
       <div className="app">
         <div className="left">
-          <Sidebar
+          <VZSidebar
             createFile={createFile}
             files={files}
             handleRenameFileClick={handleRenameFileClick}
@@ -366,10 +199,11 @@ function App() {
             setIsSettingsOpen={setIsSettingsOpen}
             isDirectoryOpen={isDirectoryOpen}
             toggleDirectory={toggleDirectory}
+            activeFileId={activeFileId}
           />
-          <Settings
+          <VZSettings
             show={isSettingsOpen}
-            onClose={handleSettingsClose}
+            onClose={closeSettings}
             theme={theme}
             setTheme={setTheme}
           />
@@ -380,16 +214,16 @@ function App() {
             tabList={tabList}
             activeFileId={activeFileId}
             setActiveFileId={setActiveFileId}
-            closeTab={closeTab}
+            closeTabs={closeTabs}
           />
           {content && activeFileId ? (
             <CodeEditor
               shareDBDoc={shareDBDoc}
+              submitOperation={submitOperation}
               localPresence={localPresence}
               docPresence={docPresence}
               activeFileId={activeFileId}
               theme={theme}
-              onInteract={handleInteract}
               editorCache={editorCache}
             />
           ) : null}

package/src/client/CodeEditor/getOrCreateEditor.ts

@@ -19,6 +19,7 @@ import { json1PresenceDisplay } from './json1PresenceDisplay';
 import {
   colorsInTextPlugin,
   highlightWidgets,
+  rotationIndicator,
   widgets,
 } from './widgets';
 import {
@@ -192,6 +193,8 @@ export const getOrCreateEditor = ({
 
   extensions.push(highlightWidgets);
 
+  extensions.push(rotationIndicator);
+
   const editor = new EditorView({
     state: EditorState.create({
       doc: text,

package/src/client/CodeEditor/index.tsx

@@ -1,4 +1,8 @@
-import { useRef, useLayoutEffect, useContext } from 'react';
+import {
+  useRef,
+  useLayoutEffect,
+  useCallback,
+} from 'react';
 import {
   FileId,
   ShareDBDoc,
@@ -11,20 +15,22 @@ import {
 } from '../useEditorCache';
 import { getOrCreateEditor } from './getOrCreateEditor';
 import './style.scss';
-// import { usePrettier } from '../usePrettier';
 
 export const CodeEditor = ({
   activeFileId,
   shareDBDoc,
+  submitOperation,
   localPresence,
   docPresence,
   theme = defaultTheme,
   filesPath = ['files'],
-  onInteract,
   editorCache,
 }: {
   activeFileId: FileId;
   shareDBDoc: ShareDBDoc<VZCodeContent> | null;
+  submitOperation: (
+    next: (content: VZCodeContent) => VZCodeContent,
+  ) => void;
   localPresence?: any;
   docPresence?: any;
   theme?: ThemeLabel;
@@ -32,14 +38,38 @@ export const CodeEditor = ({
   // The path of the files object in the ShareDB document.
   // Defaults to `files` if not provided.
   filesPath?: string[];
-  onInteract?: () => void;
   editorCache: EditorCache;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
+
+  // Set `doc.data.isInteracting` to `true` when the user is interacting
+  // via interactive code widgets (e.g. Alt+drag), and `false` when they are not.
+  const interactTimeoutRef = useRef(null);
+
+  const onInteract = useCallback(() => {
+    // Set `isInteracting: true` if not already set.
+    if (!interactTimeoutRef.current) {
+      submitOperation((document) => ({
+        ...document,
+        isInteracting: true,
+      }));
+    } else {
+      clearTimeout(interactTimeoutRef.current);
+    }
+
+    // Set `isInteracting: false` after a delay.
+    interactTimeoutRef.current = setTimeout(() => {
+      interactTimeoutRef.current = null;
+      submitOperation((document) => ({
+        ...document,
+        isInteracting: false,
+      }));
+    }, 800);
+  }, [submitOperation]);
+
   // Every time the active file switches from one file to another,
   // the editor corresponding to the old file is removed from the DOM,
   // and the editor corresponding to the new file is added to the DOM.
-
   useLayoutEffect(() => {
     // Guard against cases where page is still loading.
     if (!ref.current) return;
@@ -67,7 +97,7 @@ export const CodeEditor = ({
       // This happens every time `activeFileId` changes.
       ref.current.removeChild(editorCacheValue.editor.dom);
     };
-  }, [shareDBDoc, activeFileId]);
+  }, [shareDBDoc, activeFileId, onInteract]);
 
   return <div className="vz-code-editor" ref={ref}></div>;
 };

package/src/client/CodeEditor/{json1PresenceBroadcast.js → json1PresenceBroadcast.ts}

@@ -1,5 +1,5 @@
+import { ViewUpdate } from '@codemirror/view';
 import { EditorView } from 'codemirror';
-import { username } from '../Settings.tsx';
 
 // Deals with broadcasting changes in cursor location and selection.
 export const json1PresenceBroadcast = ({
@@ -7,7 +7,7 @@ export const json1PresenceBroadcast = ({
   localPresence,
 }) =>
   // See https://discuss.codemirror.net/t/codemirror-6-proper-way-to-listen-for-changes/2395/10
-  EditorView.updateListener.of((viewUpdate) => {
+  EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
     // If this update modified the cursor / selection,
     // we broadcast the selection update via ShareDB presence.
     if (viewUpdate.selectionSet) {
@@ -23,7 +23,9 @@ export const json1PresenceBroadcast = ({
       const presence = {
         start: [...path, from],
         end: [...path, to],
-        username: username,
+
+        // TODO fill this in with the user's actual username.
+        username: 'anonymous',
       };
 
       // Broadcast presence to remote clients!

package/src/client/CodeEditor/{json1PresenceDisplay.js → json1PresenceDisplay.ts}

@@ -20,7 +20,12 @@ export const json1PresenceDisplay = ({
 }) => [
   ViewPlugin.fromClass(
     class {
-      constructor(view) {
+      // The decorations to display.
+      // This is a RangeSet of Decoration objects.
+      // See https://codemirror.net/6/docs/ref/#view.Decoration
+      decorations: RangeSet<Decoration>;
+
+      constructor(view: EditorView) {
         // Initialize decorations to empty array so CodeMirror doesn't crash.
         this.decorations = RangeSet.of([]);
 
@@ -161,12 +166,13 @@ const pathMatches = (path, presence) => {
 
 // Displays a single remote presence cursor.
 class PresenceWidget extends WidgetType {
-  constructor(id) {
+  id: string;
+  constructor(id: string) {
     super();
     this.id = id;
   }
 
-  eq(other) {
+  eq(other: PresenceWidget) {
     return other.id === this.id;
   }
 

package/src/client/CodeEditor/widgets.ts

@@ -166,22 +166,27 @@ export const widgets = ({
         regexp: /rotate\(-?\d*\.?\d*\)/g,
         cursor: 'move',
         onDragStart(text, setText, e) {
-          rotationOrigin = { x: e.screenX, y: e.screenY };
+          rotationOrigin = { x: e.clientX, y: e.clientY };
         },
 
         onDrag(text, setText, e) {
           if (rotationOrigin == null) return;
+          const rotationDegree = Math.round(
+            (Math.atan2(
+              rotationOrigin.y - e.clientY,
+              e.clientX - rotationOrigin.x,
+            ) *
+              180) /
+              Math.PI,
+          );
           //Calculate the angle between the x axis and a line from where the user first clicks to the current location of the mouse.
-          setText(
-            `rotate(${Math.round(
-              (Math.atan2(
-                rotationOrigin.y - e.screenY,
-                e.screenX - rotationOrigin.x,
-              ) *
-                180) /
-                Math.PI,
-            )})`,
+          setText(`rotate(${rotationDegree})`);
+          const updateDragEvent = new CustomEvent(
+            'updateRotateDrag',
+            { detail: rotationDegree },
           );
+
+          document.dispatchEvent(updateDragEvent);
         },
         onDragEnd(text, setText) {
           rotationOrigin = null;
@@ -383,3 +388,100 @@ export const highlightWidgets = ViewPlugin.fromClass(
     },
   },
 );
+
+export const rotationIndicator = ViewPlugin.fromClass(
+  class {
+    view: EditorView;
+    textPosition?: number;
+    rotation: number;
+    constructor(view) {
+      this.view = view;
+      this.textPosition = null;
+      this.rotation = 0;
+
+      document.addEventListener(
+        'updateRotateDrag',
+        (e: CustomEvent) => {
+          this.textPosition = this.view.posAtCoords(
+            rotationOrigin,
+            false,
+          );
+
+          this.rotation = e.detail;
+        },
+      );
+    }
+  },
+  {
+    decorations: (v) => {
+      if (rotationOrigin === null) {
+        return Decoration.none;
+      }
+      return Decoration.set([
+        {
+          from: v.textPosition,
+          to: v.textPosition,
+          value: Decoration.widget({
+            side: -1,
+            widget: new RotationCircle(v.rotation),
+          }),
+        },
+      ]);
+    },
+  },
+);
+
+class RotationCircle extends WidgetType {
+  angle: number;
+  constructor(angle: number) {
+    super();
+    this.angle = angle;
+  }
+
+  toDOM(view: EditorView): HTMLElement {
+    const parent = document.createElement('div');
+
+    parent.setAttribute('style', 'width:20px;height:20px');
+    parent.className = 'color-circle-parent';
+    const svg = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'svg',
+    );
+    const colorCircle = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'circle',
+    );
+    colorCircle.setAttributeNS(null, 'fill', '#808080');
+    colorCircle.setAttributeNS(null, 'r', '5');
+    colorCircle.setAttributeNS(null, 'cx', '5');
+    colorCircle.setAttributeNS(null, 'cy', '5');
+
+    const indicatorLine = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'line',
+    );
+    indicatorLine.setAttributeNS(null, 'x1', '10');
+    indicatorLine.setAttributeNS(null, 'x2', '5');
+    indicatorLine.setAttributeNS(null, 'y1', '5');
+    indicatorLine.setAttributeNS(null, 'y2', '5');
+    indicatorLine.setAttributeNS(null, 'stroke', 'black');
+    indicatorLine.setAttributeNS(
+      null,
+      'transform',
+      `rotate(${360 - this.angle},5,5)`,
+    );
+
+    svg.setAttributeNS(null, 'viewBox', '0 0 10 10');
+    svg.setAttributeNS(null, 'width', '20');
+    svg.setAttributeNS(null, 'height', '20');
+
+    svg.appendChild(colorCircle);
+    svg.appendChild(indicatorLine);
+
+    parent.appendChild(svg);
+    return parent;
+  }
+  ignoreEvent() {
+    return false;
+  }
+}

package/src/client/PresenceNotifications/index.tsx

@@ -66,8 +66,6 @@ export const PresenceNotifications = ({
         // `false` means user has left the session.
         const join = update !== null;
 
-        console.log('join', join);
-
         // Figure out if we have ever seen this user before.
 
         // if (join && docPresence.remotePresences[presenceId] === undefined){