vzcode 0.23.0 → 0.25.0

package/src/client/CodeEditor/widgets.ts

@@ -4,6 +4,7 @@ import {
   ViewPlugin,
   Decoration,
   WidgetType,
+  keymap,
 } from '@codemirror/view';
 import {
   Annotation,
@@ -165,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;
@@ -312,3 +318,170 @@ class ColorWidget extends WidgetType {
     return false;
   }
 }
+
+export const highlightWidgets = ViewPlugin.fromClass(
+  class {
+    showHighlight: boolean;
+    view: EditorView;
+    constructor(view: EditorView) {
+      this.showHighlight = false;
+      this.view = view;
+    }
+  },
+  {
+    decorations: (v) => {
+      if (!v.showHighlight) {
+        return Decoration.none;
+      }
+
+      const interactOpportunities = [];
+      const lines = v.view.state.doc.iter();
+      let line = lines.next();
+
+      //Offset is the number of characters before the regex so the highlighting can be placed properly.
+      let offset = 0;
+      while (!line.done) {
+        if (line.value === '\n') {
+          offset++;
+          line = lines.next();
+          continue;
+        }
+        const interactiveOccurances = line.value.matchAll(
+          //The below line contains all of the Regexes for all of the interactive widgets.
+          /\"\#([0-9]|[A-F]|[a-f]){6}\"|rotate\(-?\d*\.?\d*\)|https?:\/\/[^ "]+|vec2\(-?\b\d+\.?\d*\b\s*(,\s*-?\b\d+\.?\d*\b)?\)|true|false|(?<!\#)-?\b\d+\.?\d*\b|rgb\(.*\)/dg,
+        );
+        let interactOccurance =
+          interactiveOccurances.next();
+        while (!interactOccurance.done) {
+          const offsetInteract = interactOccurance.value;
+          offsetInteract.indices[0][0] += offset;
+          offsetInteract.indices[0][1] += offset;
+          interactOpportunities.push(offsetInteract);
+          interactOccurance = interactiveOccurances.next();
+        }
+        offset += line.value.length;
+        line = lines.next();
+      }
+      return Decoration.set(
+        interactOpportunities.map((opportunity) => {
+          return {
+            from: opportunity.indices[0][0],
+            to: opportunity.indices[0][1],
+            value: Decoration.mark({
+              class: 'cm-interact ',
+            }),
+          };
+        }),
+      );
+    },
+    eventHandlers: {
+      keydown(event, view) {
+        if (event.key == 'Alt') {
+          this.showHighlight = true;
+        }
+      },
+      keyup(event, view) {
+        if (event.key == 'Alt') {
+          this.showHighlight = false;
+        }
+      },
+    },
+  },
+);
+
+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

@@ -0,0 +1,145 @@
+import { useState, useEffect, useRef } from 'react';
+import './style.scss';
+
+type PresenceId = string;
+
+// A presence notification is a message that is displayed when a user joins or leaves a session.
+// It has the following properties:
+// - `user` is the username of the user who joined or left the session.
+// - `join` is a boolean value that indicates whether the user joined or left the session.
+//   - `true` means user has joined the session.
+//   - `false` means user has left the session.
+type PresenceNotification = {
+  user: string;
+  join: boolean;
+  presenceId: PresenceId;
+};
+
+export const PresenceNotifications = ({
+  docPresence,
+}: {
+  docPresence?: any;
+}) => {
+  const [presenceNotifications, setPresenceNotifications] =
+    useState<Array<PresenceNotification>>([]);
+
+  // const [presenceIds, setPresenceIds] = useState<
+  //   Array<any>
+  // >([]);
+  const alreadyJoinedPresenceIds = useRef<Set<PresenceId>>(
+    new Set(),
+  );
+
+  useEffect(() => {
+    // console.log('useEffect triggered.');
+    if (docPresence) {
+      // See https://share.github.io/sharedb/presence
+      docPresence.on('receive', (presenceId, update) => {
+        // Reason for notifications appearing on every cursor movement:
+        //  code doesn't check if a notification about a user joining was previously sent
+
+        // Attempted solutions:
+        //  - create an array called presenceIds that keeps track of the presences that join and leave
+        //      - if presenceId is in presenceIds: local user was already alerted that a remote user joined
+        //      - if presenceId is not in presenceIds: local user needs to be notified about a new user
+        //      - problems:
+        //          - the array is always empty inside useEffect (array works outside of useEffect)
+        //              - causes check to fail
+        //  - check docPresence.remotePresences, which keeps track of all the remote presences on the doc
+        //      - see https://share.github.io/sharedb/api/presence
+        //      - if presenceId is in docPresence.remotePresences: local user was already alerted that a remote user joined
+        //      - if presenceId is not in docPresence.remotePresences: local user needs to be notified about a new user
+        //      - problems:
+        //          - useEffects is called when docPresence changes (in some cases, it's when the remote presence changes)
+        //          - remotePresences already has the remote presence in the array, so check fails
+        //      - could add another property to presence (true: already notified, false: need to be notified)
+        //          - doesn't seem like an ideal solution
+
+        // console.log('docPresence:', docPresence);
+        // console.log('docPresence remotePresences:', docPresence.remotePresences);
+        // console.log('check for presence:', docPresence.remotePresences[presenceId]);
+
+        // TODO figure out how to get username from `presenceId`.
+        const user = 'someone';
+
+        // `true` means user has joined the session.
+        // `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){
+        if (join) {
+          if (
+            !alreadyJoinedPresenceIds.current.has(
+              presenceId,
+            )
+          ) {
+            alreadyJoinedPresenceIds.current.add(
+              presenceId,
+            );
+            setPresenceNotifications((prev) => [
+              ...prev,
+              { user, join, presenceId },
+            ]);
+
+            // Remove it after 5 seconds.
+            setTimeout(() => {
+              setPresenceNotifications((prev) =>
+                prev.filter(
+                  (notification) =>
+                    notification.presenceId !==
+                      presenceId &&
+                    notification.join !== join,
+                ),
+              );
+            }, 5000);
+          }
+        } else if (!join) {
+          setPresenceNotifications((prev) => [
+            ...prev,
+            { user, join, presenceId },
+          ]);
+
+          // Remove it after 5 seconds.
+          // TODO clean up this duplication.
+          setTimeout(() => {
+            setPresenceNotifications((prev) =>
+              prev.filter(
+                (notification) =>
+                  notification.presenceId !== presenceId &&
+                  notification.join !== join,
+              ),
+            );
+          }, 5000);
+        }
+      });
+    }
+  }, [docPresence]);
+
+  // console.log(
+  //   'presenceNotifications',
+  //   presenceNotifications,
+  // );
+  // console.log(
+  //   'presenceIds',
+  //   presenceIds,
+  // );
+
+  return presenceNotifications.length > 0 ? (
+    <div className="vz-notification">
+      {presenceNotifications.map((notification, i) => {
+        const { user, join } = notification;
+        return (
+          <div key={i} className="vz-notification-item">
+            {join
+              ? `${user} has joined the session.`
+              : `${user} has left the session.`}
+          </div>
+        );
+      })}
+    </div>
+  ) : null;
+};

package/src/client/PresenceNotifications/style.scss

@@ -0,0 +1,17 @@
+.vz-notification {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  bottom: 20px;
+  right: 20px;
+
+  color: rgb(154, 160, 172);
+  padding: 15px;
+
+  .vz-notification-item {
+    background-color: rgb(54, 65, 89);
+    padding: 5px;
+    border-radius: 5px;
+  }
+}

package/src/client/PrettierErrorOverlay/index.tsx

@@ -0,0 +1,9 @@
+import './style.scss';
+
+export const PrettierErrorOverlay = ({ prettierError }) => {
+  return prettierError !== null ? (
+    <pre className="prettier-error-overlay">
+      {prettierError}
+    </pre>
+  ) : null;
+};

package/src/client/PrettierErrorOverlay/style.scss

@@ -0,0 +1,9 @@
+.prettier-error-overlay {
+  color: rgb(255, 53, 53);
+  background-color: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}

package/src/client/Settings.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { Button, Modal, Form } from './bootstrap';
 import { ThemeLabel, themes } from './themes';
 
@@ -9,6 +9,8 @@ import { ThemeLabel, themes } from './themes';
 //   { value: 30, label: '30 seconds' },
 // ];
 
+export let username = 'Anonymous';
+
 export const Settings = ({
   show,
   onClose,
@@ -41,6 +43,12 @@ export const Settings = ({
   //   [],
   // );
 
+  const usernameRef = useRef<HTMLInputElement>(null);
+  const handleUsernameChange = () => {
+    const usernameValue = usernameRef.current?.value;
+    username = usernameValue;
+  };
+
   return show ? (
     <Modal
       className="vz-settings"
@@ -56,6 +64,8 @@ export const Settings = ({
           <Form.Label>Username</Form.Label>
           <Form.Control
             type="text"
+            ref={usernameRef}
+            onChange={handleUsernameChange}
             placeholder="Enter username"
           />
           <Form.Text className="text-muted">

package/src/client/Sidebar/FileListing.tsx

@@ -46,7 +46,6 @@ export const FileListing = ({
       handleDeleteClick={handleDeleteClick}
       handleRenameClick={handleRenameClick}
       isDir={false}
-      name={name}
     >
       {name}
     </Item>

package/src/client/Sidebar/Item.tsx

@@ -19,9 +19,9 @@ export const Item = ({
   const [renameValue, setRenameValue] = useState('');
 
   const onKeyDown = useCallback((event) => {
-    // TODO make 'Escape' cancel the changes - do not commit the rename
-    // https://github.com/vizhub-core/vzcode/issues/207
-    if (event.key === 'Enter' || event.key === 'Escape') {
+    if (event.key === 'Escape') {
+      setIsRenaming(false);
+    } else if (event.key === 'Enter') {
       event.target.blur();
     }
   }, []);
@@ -42,9 +42,13 @@ export const Item = ({
   const [showModal, setShowModal] = useState(false);
 
   // Function to open the delete file confirmation modal
-  const handleModalOpen = useCallback(() => {
-    setShowModal(true);
-  }, []);
+  const handleModalOpen = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setShowModal(true);
+    },
+    [],
+  );
 
   // Function to close the modal
   const handleModalClose = useCallback(() => {
@@ -52,10 +56,14 @@ export const Item = ({
   }, []);
 
   // Function to handle confirmation on modal
-  const handleConfirmModal = useCallback(() => {
-    setShowModal(false);
-    handleDeleteClick();
-  }, [handleDeleteClick]);
+  const handleConfirmModal = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setShowModal(false);
+      handleDeleteClick();
+    },
+    [handleDeleteClick],
+  );
 
   const handleMouseEnter = useCallback(() => {
     setIsHovered(true);
@@ -98,7 +106,8 @@ export const Item = ({
           <i
             className="bx bxs-edit utilities"
             style={{ color: '#abdafb' }}
-            onClick={() => {
+            onClick={(event: React.MouseEvent) => {
+              event.stopPropagation();
               setIsRenaming(!isRenaming);
               setRenameValue(isDir ? name : children);
             }}

package/src/client/reducer.ts

@@ -0,0 +1,119 @@
+import { FileId } from '../types';
+import { act } from 'react-dom/test-utils';
+
+export const reducer = (state, action) => {
+  switch (action.type) {
+    // TODO phase this out
+
+    // The ordered list of tabs.
+    // TODO make this a URL param
+    case 'set_tab_list': {
+      return { ...state, tabList: action.tabList };
+    }
+    // TODO make this a URL param
+    case 'set_active_fileId': {
+      return {
+        ...state,
+        activeFileId: action.activeFileId,
+      };
+    }
+    case 'open_tab': {
+      if (!state.tabList.includes(action.fileId)) {
+        return {
+          ...state,
+          activeFileId: action.fileId,
+          tabList: [...state.tabList, action.fileId],
+        };
+      } else {
+        return {
+          ...state,
+          activeFileId: action.fileId,
+        };
+      }
+    }
+    case 'close_tab': {
+      const i = state.tabList.findIndex(
+        (fileId) => fileId === action.fileIdToRemove,
+      );
+      if (i != -1) {
+        const newTabList = [
+          ...state.tabList.slice(0, i),
+          ...state.tabList.slice(i + 1),
+        ];
+        if (state.activeFileId === action.fileIdToRemove) {
+          // set the new active file to the next tab over,
+          if (newTabList.length > 0) {
+            return {
+              ...state,
+              activeFileId:
+                i === 0 ? newTabList[i] : newTabList[i - 1],
+              tabList: newTabList,
+            };
+          } else {
+            // or clear out the active file
+            // if we've closed the last tab.
+            return {
+              ...state,
+              activeFileId: null,
+              tabList: newTabList,
+            };
+          }
+        }
+        return {
+          ...state,
+          tabList: newTabList,
+        };
+      }
+      return {
+        ...state,
+      };
+    }
+    case 'multi_close_tab': {
+      let newTabList = [...state.tabList]; // Create a copy of the tabList array.
+      let newActiveFileId: FileId = state.activeFileId;
+      action.idsToDelete.forEach((id) => {
+        const i = newTabList.findIndex(
+          (fileId) => fileId === id,
+        );
+        if (i !== -1) {
+          // Remove the tab from the tab list.
+          newTabList = [
+            ...newTabList.slice(0, i),
+            ...newTabList.slice(i + 1),
+          ];
+          // If we are closing the active file,
+          if (newActiveFileId === id) {
+            // set the new active file to the next tab over,
+            if (newTabList.length > 0) {
+              newActiveFileId =
+                i === 0 ? newTabList[i] : newTabList[i - 1];
+            } else {
+              // or clear out the active file if we've closed the last tab.
+              newActiveFileId = null;
+            }
+          }
+        }
+      });
+      return {
+        ...state,
+        tabList: newTabList,
+        activeFileId: newActiveFileId,
+      };
+    }
+    // The current theme.
+    // TODO persist this in local storage
+    case 'set_Theme': {
+      return {
+        ...state,
+        theme: action.themeLabel,
+      };
+    }
+    case 'set_Is_Settings_Open': {
+      return {
+        ...state,
+        isSettingsOpen: action.value,
+      };
+    }
+  }
+  throw Error('Unknown action: ' + action.type);
+};

package/src/client/style.scss

@@ -45,6 +45,9 @@ body,
   .left,
   .right {
     display: flex;
+
+    /* To suport PrettierErrorOverlay, which is position: absolute */
+    position: relative;
   }
 
   .right {

package/src/client/themes/index.ts

@@ -0,0 +1,7 @@
+export {
+  themes,
+  defaultTheme,
+  themeOptionsByLabel,
+} from './themes';
+export type { ThemeLabel, ThemeOption } from './themes';
+export { useDynamicTheme } from './useDynamicTheme';

package/src/client/{themes.ts → themes/themes.ts}

@@ -7,7 +7,7 @@ import { githubDark } from '@uiw/codemirror-theme-github';
 import { material } from '@uiw/codemirror-theme-material';
 import { nord } from '@uiw/codemirror-theme-nord';
 import { xcodeLight } from '@uiw/codemirror-theme-xcode';
-// import { vizhub } from './vizhub-theme';
+import { vizhubTheme } from './vizhubTheme';
 
 // CodeMirror themes
 export type ThemeLabel =
@@ -19,8 +19,8 @@ export type ThemeLabel =
   | 'oneDark'
   | 'okaidia'
   | 'github'
-  | 'xcode';
-// | 'vizhub'
+  | 'xcode'
+  | 'vizhub';
 
 export type ThemeOption = {
   value: any;
@@ -37,7 +37,7 @@ export const themes: Array<ThemeOption> = [
   { value: okaidia, label: 'okaidia' },
   { value: githubDark, label: 'github' },
   { value: xcodeLight, label: 'xcode' },
-  // { value: vizhub, label: 'vizhub' },
+  { value: vizhubTheme, label: 'vizhub' },
 ];
 
 // Map theme labels to theme values
@@ -53,4 +53,4 @@ export const themeOptionsByLabel: Record<
 );
 
 // The default theme
-export const defaultTheme: ThemeLabel = 'oneDark';
+export const defaultTheme: ThemeLabel = 'vizhub';

package/src/client/{useDynamicTheme.ts → themes/useDynamicTheme.ts}

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { EditorCache } from './useEditorCache';
+import { EditorCache } from '../useEditorCache';
 import { ThemeLabel, themeOptionsByLabel } from './themes';
 
 export const useDynamicTheme = (