npm - vzcode - Versions diffs - 0.24.0 → 0.25.0 - Mend

vzcode 0.24.0 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/assets/index-8628ebab.js +111 -0
package/dist/index.html +1 -1
package/package.json +3 -1
package/src/client/App.tsx +78 -64
package/src/client/CodeEditor/getOrCreateEditor.ts +3 -0
package/src/client/CodeEditor/widgets.ts +112 -10
package/src/client/Sidebar/Item.tsx +3 -3
package/src/client/reducer.ts +19 -22
package/src/client/themes/index.ts +7 -0
package/src/client/{themes.ts → themes/themes.ts} +5 -5
package/src/client/{useDynamicTheme.ts → themes/useDynamicTheme.ts} +1 -1
package/src/client/themes/vizhubTheme/colors.ts +80 -0
package/src/client/themes/vizhubTheme/index.ts +166 -0
package/dist/assets/index-9c8bbae0.js +0 -111
package/src/client/useTabsState.ts +0 -95
package/src/client/vizhubTheme.js +0 -1

package/dist/index.html CHANGED Viewed

@@ -28,7 +28,7 @@
       href="https://unpkg.com/bootstrap@5.3.0/dist/css/bootstrap.min.css"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-9c8bbae0.js"></script>
+    <script type="module" crossorigin src="/assets/index-8628ebab.js"></script>
     <link rel="stylesheet" href="/assets/index-cf19de3b.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Multiplayer code editor system",
   "main": "index.js",
   "type": "module",
@@ -53,6 +53,7 @@
     "@codemirror/state": "^6.3.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.21.3",
+    "@lezer/highlight": "^1.1.6",
     "@replit/codemirror-interact": "^6.3.0",
     "@teamwork/websocket-json-stream": "^2.0.0",
     "@uiw/codemirror-theme-abcdef": "^4.21.20",
@@ -63,6 +64,7 @@
     "@uiw/codemirror-theme-nord": "^4.21.20",
     "@uiw/codemirror-theme-okaidia": "^4.21.20",
     "@uiw/codemirror-theme-xcode": "^4.21.20",
+    "@uiw/codemirror-themes": "^4.21.20",
     "codemirror": "^6.0.1",
     "codemirror-ot": "^4.1.0",
     "d3-array": "^3.2.4",

package/src/client/App.tsx CHANGED Viewed

@@ -20,10 +20,12 @@ import {
 } from '../types';
 import { TabList } from './TabList';
 import { useOpenDirectories } from './useOpenDirectories';
-import { useTabsState } from './useTabsState';
-import { ThemeLabel, defaultTheme } from './themes';
+import {
+  ThemeLabel,
+  defaultTheme,
+  useDynamicTheme,
+} from './themes';
 import { useEditorCache } from './useEditorCache';
-import { useDynamicTheme } from './useDynamicTheme';
 import { usePrettier } from './usePrettier';
 // @ts-ignore
 import PrettierWorker from './usePrettier/worker?worker';
@@ -153,76 +155,92 @@ 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,
     tabList: [],
-    // activeFileId: null,
-    // theme: defaultTheme,
-    // isSettingsOpen:false
+    activeFileId: null,
+    theme: defaultTheme,
+    isSettingsOpen: false,
   });
   //Reducer states
   const tabList = state.tabList;
   const activeFileId = state.activeFileId;
+  const theme = state.theme;
+  const isSettingsOpen = state.isSettingsOpen;
   // 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 setTabList = useCallback(
+    (tabList) => {
+      dispatch({
+        type: 'set_tab_list',
+        tabList,
+      });
+    },
+    [dispatch],
+  );
-  const closeTab = (fileIdToRemove: FileId) => {
-    dispatch({
-      type: 'close_tab',
-      fileIdToRemove,
-    });
-  };
+  const setActiveFileId = useCallback(
+    (activeFileId) => {
+      dispatch({
+        type: 'set_active_fileId',
+        activeFileId,
+      });
+    },
+    [dispatch],
+  );
-  const multiCloseTab = (idsToDelete: Array<FileId>) => {
-    dispatch({
-      type: 'multi_close_tab',
-      idsToDelete,
-    });
-  };
-  // Logic for opening and closing tabs. Migrated to useReducer
-  /*
-  const {} = useTabsState(
-    activeFileId,
-    setActiveFileId,
-    tabList,
-    setTabList,
-  ); */
-  // The current theme.
-  // TODO persist this in local storage
-  const [theme, setTheme] =
-    useState<ThemeLabel>(defaultTheme);
+  const openTab = useCallback(
+    (fileId: FileId) => {
+      dispatch({
+        type: 'open_tab',
+        fileId,
+      });
+    },
+    [dispatch],
+  );
+  const closeTab = useCallback(
+    (fileIdToRemove: FileId) => {
+      dispatch({
+        type: 'close_tab',
+        fileIdToRemove,
+      });
+    },
+    [dispatch],
+  );
+  const multiCloseTab = useCallback(
+    (idsToDelete: Array<FileId>) => {
+      dispatch({
+        type: 'multi_close_tab',
+        idsToDelete,
+      });
+    },
+    [dispatch],
+  );
+  const setTheme = useCallback(
+    (themeLabel: ThemeLabel) => {
+      dispatch({
+        type: 'set_Theme',
+        themeLabel: themeLabel,
+      });
+    },
+    [dispatch],
+  );
+  // True to show the settings modal.
+  const setIsSettingsOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_Is_Settings_Open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
   // Cache of CodeMirror editors by file id.
   const editorCache = useEditorCache();
@@ -230,10 +248,6 @@ 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();

package/src/client/CodeEditor/getOrCreateEditor.ts CHANGED Viewed

@@ -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/widgets.ts CHANGED Viewed

@@ -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/Sidebar/Item.tsx CHANGED Viewed

@@ -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();
     }
   }, []);

package/src/client/reducer.ts CHANGED Viewed

@@ -1,11 +1,16 @@
 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,
@@ -95,28 +100,20 @@ export const reducer = (state, action) => {
         activeFileId: newActiveFileId,
       };
     }
-    // TODO eventually
-    // case 'init_sharedb': {
-    //   return {
-    //     ...state,
-    //     submitOperation: action.submitOperation
-    //   }
-    // }
-    // case 'delete_file': {
-    // case 'delete_directory': {
-    // case 'create_file': {
-    //           state.submitOperation((document) => ({
-    //             ...document,
-    //             files: {
-    //               ...document.files,
-    //               [randomId()]: { name:action.name, text: '' },
-    //             },
-    //           }))
-    //           return state;
-    //     }
-    // case 'rename_file': {
-    // ...
+    // 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/themes/index.ts ADDED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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 = (

package/src/client/themes/vizhubTheme/colors.ts ADDED Viewed

@@ -0,0 +1,80 @@
+// import { hcl } from 'd3-color';
+// This module defines all the colors for the VizHub theme.
+// Ported from the CodeMirror 5 theme defined here:
+// https://github.com/vizhub-core/vizhub-legacy/blob/01cadfb78a2611df32f981b1fd8136b70447de9e/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/themes/vizHub.js
+// This is how the colors were generated:
+// const sidebarDark = hcl('#3d4b65');
+// const sidebarLight = hcl('#5b677d');
+// const luminaceDifference = sidebarLight.l - sidebarDark.l;
+// const backgroundLuminance =
+//   sidebarDark.l - luminaceDifference * 1.1;
+// const luminance = 90;
+// export const backgroundColor = hcl(
+//   sidebarDark.h,
+//   sidebarDark.c,
+//   backgroundLuminance,
+// ).formatHex();
+// export const light = hcl(0, 0, luminance).formatHex();
+// export const dark = hcl(
+//   sidebarDark.h,
+//   sidebarDark.c,
+//   80,
+// ).formatHex();
+// console.log(
+//   JSON.stringify(
+//     {
+//       backgroundColor,
+//       light,
+//       dark,
+//     },
+//     null,
+//     2,
+//   ),
+// );
+// These are inlined from the above code, but the code is kept around for future reference.
+export const backgroundColor = '#202e46';
+export const light = '#e2e2e2';
+export const dark = '#b9c7e6';
+export const lineNumbers = 'rgba(255,255,255,0.2)';
+export const lineNumbersActive = 'rgba(255,255,255,0.5)';
+export const selectionBackground = '#000';
+export const selectionBackgroundMatch = 'rgba(0,0,0,0.4)';
+export const lineHighlight = 'rgba(0,0,0,0.1)';
+export const caretColor = 'white';
+// Compute 6 colors that are evenly spaced in terms of hue
+// Keeping this code around for future reference
+// const rotation = 0.397;
+// const numColors = 6;
+// const highlightColors = Array.from(
+//   { length: numColors },
+//   (_, i) => {
+//     let t = (i / numColors + rotation) % 1;
+//     return hcl(t * 360, saturation, luminance).formatHex();
+//   },
+// );
+// console.log(JSON.stringify(highlightColors));
+// We inline the colors here, but the code above is how they were generated.
+const highlightColors = [
+  '#77fd8c',
+  '#00ffff',
+  '#66ecff',
+  '#ffb9ff',
+  '#ffabb3',
+  '#ffdb56',
+];
+export const MINT = highlightColors[0];
+export const AQUA = highlightColors[1];
+export const SKY = highlightColors[2];
+export const LAVENDER = highlightColors[3];
+export const SALMON = highlightColors[4];
+export const GOLDENROD = highlightColors[5];
+// Red that's not too bright, for errors
+export const PANIC = '#ff2222';