From 70bc4ac4a92a6b96c836155a264f3fd172831e41 Mon Sep 17 00:00:00 2001 From: Xinyi Li Date: Thu, 10 Nov 2022 01:48:09 +0000 Subject: [PATCH 1/2] add feature --- ui/src/components/Canvas.tsx | 66 ++++++++++++++----------- ui/src/components/CanvasContextMenu.tsx | 50 +++++++++++++++++++ ui/src/components/MyMonaco.tsx | 13 +++-- ui/src/index.css | 19 +++++++ ui/src/lib/store.tsx | 5 ++ 5 files changed, 120 insertions(+), 33 deletions(-) create mode 100644 ui/src/components/CanvasContextMenu.tsx diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx index 3674b8dd..9c59f02c 100644 --- a/ui/src/components/Canvas.tsx +++ b/ui/src/components/Canvas.tsx @@ -38,6 +38,7 @@ import { RepoContext } from "../lib/store"; import { MyMonaco } from "./MyMonaco"; import { useApolloClient } from "@apollo/client"; +import { CanvasContextMenu } from "./CanvasContextMenu"; const nanoid = customAlphabet(nolookalikes, 10); @@ -727,36 +728,41 @@ export function Canvas() { {showContextMenu && ( - - - - - - + // + // + // + // + // + // + {addNode(client.x, client.y, "code")}} + addScope={() => addNode(client.x, client.y, "scope")} /> )} diff --git a/ui/src/components/CanvasContextMenu.tsx b/ui/src/components/CanvasContextMenu.tsx new file mode 100644 index 00000000..c504994a --- /dev/null +++ b/ui/src/components/CanvasContextMenu.tsx @@ -0,0 +1,50 @@ +import { useStore } from "zustand"; +import { RepoContext } from "../lib/store"; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import MenuList from '@mui/material/MenuList'; +import MenuItem from '@mui/material/MenuItem'; +import React, { useContext } from 'react'; +import CodeIcon from '@mui/icons-material/Code'; +import PostAddIcon from '@mui/icons-material/PostAdd'; +import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; + +const paneMenuStyle = (left, top) => { + return ({ + left: `${left}px`, + top: `${top}px`, + zIndex: 100, + position: 'absolute', + boxShadow: '0px 1px 8px 0px rgba(0, 0, 0, 0.1)', + // width: '200px', + backgroundColor: '#fff', + borderRadius: '5px', + boxSizing: 'border-box', + }) as React.CSSProperties; +}; + + +export function CanvasContextMenu(props) { + const store = useContext(RepoContext); + if (!store) throw new Error("Missing BearContext.Provider in the tree"); + const showLineNumbers = useStore(store, (state) => state.showLineNumbers); + const flipShowLineNumbers = useStore(store, (state) => state.flipShowLineNumbers); + return ( +
+ + + + New Code + + + + New Scope + + + + {showLineNumbers ? 'Hide ' : 'Show '} Line Numbers + + +
+ ); +} \ No newline at end of file diff --git a/ui/src/components/MyMonaco.tsx b/ui/src/components/MyMonaco.tsx index 0ec54f1d..aca707ee 100644 --- a/ui/src/components/MyMonaco.tsx +++ b/ui/src/components/MyMonaco.tsx @@ -1,7 +1,9 @@ import { Position } from "monaco-editor"; -import { useState } from "react"; +import { useState, useContext } from "react"; import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor"; import { monaco } from "react-monaco-editor"; +import { useStore } from "zustand"; +import { RepoContext } from "../lib/store"; monaco.languages.setLanguageConfiguration("julia", { indentationRules: { @@ -299,11 +301,15 @@ export function MyMonaco({ lang = "javascript", value = "", gitvalue = null, - onChange = (value) => {}, - onRun = () => {}, + onChange = (value) => { }, + onRun = () => { }, }) { // console.log("rendering monaco .."); // there's no racket language support + const store = useContext(RepoContext); + if (!store) throw new Error("Missing BearContext.Provider in the tree"); + const showLineNumbers = useStore(store, (state) => state.showLineNumbers); + if (lang === "racket") { lang = "scheme"; } @@ -334,6 +340,7 @@ export function MyMonaco({ // autoIndent: true, overviewRulerLanes: 0, automaticLayout: true, + lineNumbers: showLineNumbers ? "on" : "off", scrollbar: { alwaysConsumeMouseWheel: false, vertical: "hidden", diff --git a/ui/src/index.css b/ui/src/index.css index ec2585e8..254b23a2 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -11,3 +11,22 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + + +.paneContextMenu > li { + cursor: default; + font-family: sans-serif; + border: 0; + padding: 5px; + display: flex; + align-items: left; +} + +.paneContextMenu > li > .icon { + margin-right: 10px; +} + +.paneContextMenu > li:hover { + background:#f1f3f7; + color: #4b00ff; +} \ No newline at end of file diff --git a/ui/src/lib/store.tsx b/ui/src/lib/store.tsx index 01c0cc4c..c145324f 100644 --- a/ui/src/lib/store.tsx +++ b/ui/src/lib/store.tsx @@ -67,6 +67,7 @@ const initialState = { queueProcessing: false, socket: null, socketIntervalId: null, + showLineNumbers: true }; export type Pod = { @@ -125,6 +126,7 @@ export interface RepoSlice { kernels: Record; // queueProcessing: boolean; socket: WebSocket | null; + showLineNumbers: boolean; error: { type: string; msg: string } | null; updatePod: ({ id, data }: { id: string; data: Partial }) => void; remoteUpdateAllPods: (client) => void; @@ -151,6 +153,7 @@ export interface RepoSlice { }) => void; setPodPosition: ({ id, x, y }: any) => void; setPodParent: ({ id, parent }: any) => void; + flipShowLineNumbers: () => void; } type BearState = RepoSlice & RuntimeSlice; @@ -622,6 +625,8 @@ const createRepoSlice: StateCreator< // state.pods[action.meta.arg.id].isSyncing = false; // state.pods[action.meta.arg.id].dirty = false; }, + flipShowLineNumbers: () => + set((state) => ({ showLineNumbers: !state.showLineNumbers })), }); export const createRepoStore = () => From 7ef2186d08334a3b6e15f9aaf6b9b63c36c25825 Mon Sep 17 00:00:00 2001 From: Xinyi Li Date: Thu, 10 Nov 2022 02:34:49 +0000 Subject: [PATCH 2/2] fix(style): inline style --- ui/src/components/Canvas.tsx | 35 +------- ui/src/components/CanvasContextMenu.tsx | 102 ++++++++++++++---------- ui/src/components/MyMonaco.tsx | 4 +- ui/src/index.css | 19 ----- ui/src/lib/store.tsx | 7 +- 5 files changed, 69 insertions(+), 98 deletions(-) diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx index 9c59f02c..aaaf2ac7 100644 --- a/ui/src/components/Canvas.tsx +++ b/ui/src/components/Canvas.tsx @@ -728,41 +728,12 @@ export function Canvas() { {showContextMenu && ( - // - // - // - // - // - // {addNode(client.x, client.y, "code")}} - addScope={() => addNode(client.x, client.y, "scope")} /> + addCode={() => addNode(client.x, client.y, "code")} + addScope={() => addNode(client.x, client.y, "scope")} + /> )} diff --git a/ui/src/components/CanvasContextMenu.tsx b/ui/src/components/CanvasContextMenu.tsx index c504994a..ac89c65c 100644 --- a/ui/src/components/CanvasContextMenu.tsx +++ b/ui/src/components/CanvasContextMenu.tsx @@ -1,50 +1,68 @@ import { useStore } from "zustand"; import { RepoContext } from "../lib/store"; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import MenuList from '@mui/material/MenuList'; -import MenuItem from '@mui/material/MenuItem'; -import React, { useContext } from 'react'; -import CodeIcon from '@mui/icons-material/Code'; -import PostAddIcon from '@mui/icons-material/PostAdd'; -import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; +import Box from "@mui/material/Box"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import MenuList from "@mui/material/MenuList"; +import MenuItem from "@mui/material/MenuItem"; +import React, { useContext } from "react"; +import CodeIcon from "@mui/icons-material/Code"; +import PostAddIcon from "@mui/icons-material/PostAdd"; +import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered"; const paneMenuStyle = (left, top) => { - return ({ - left: `${left}px`, - top: `${top}px`, - zIndex: 100, - position: 'absolute', - boxShadow: '0px 1px 8px 0px rgba(0, 0, 0, 0.1)', - // width: '200px', - backgroundColor: '#fff', - borderRadius: '5px', - boxSizing: 'border-box', - }) as React.CSSProperties; + return { + left: `${left}px`, + top: `${top}px`, + zIndex: 100, + position: "absolute", + boxShadow: "0px 1px 8px 0px rgba(0, 0, 0, 0.1)", + // width: '200px', + backgroundColor: "#fff", + borderRadius: "5px", + boxSizing: "border-box", + } as React.CSSProperties; }; +const ItemStyle = { + "&:hover": { + background: "#f1f3f7", + color: "#4b00ff", + }, +}; export function CanvasContextMenu(props) { - const store = useContext(RepoContext); - if (!store) throw new Error("Missing BearContext.Provider in the tree"); - const showLineNumbers = useStore(store, (state) => state.showLineNumbers); - const flipShowLineNumbers = useStore(store, (state) => state.flipShowLineNumbers); - return ( -
- - - - New Code - - - - New Scope - - - - {showLineNumbers ? 'Hide ' : 'Show '} Line Numbers - - -
- ); -} \ No newline at end of file + const store = useContext(RepoContext); + if (!store) throw new Error("Missing BearContext.Provider in the tree"); + const showLineNumbers = useStore(store, (state) => state.showLineNumbers); + const flipShowLineNumbers = useStore( + store, + (state) => state.flipShowLineNumbers + ); + return ( + + + + + + + New Code + + + + + + New Scope + + + + + + + {showLineNumbers ? "Hide " : "Show "} Line Numbers + + + + + ); +} diff --git a/ui/src/components/MyMonaco.tsx b/ui/src/components/MyMonaco.tsx index aca707ee..efd36ab7 100644 --- a/ui/src/components/MyMonaco.tsx +++ b/ui/src/components/MyMonaco.tsx @@ -301,8 +301,8 @@ export function MyMonaco({ lang = "javascript", value = "", gitvalue = null, - onChange = (value) => { }, - onRun = () => { }, + onChange = (value) => {}, + onRun = () => {}, }) { // console.log("rendering monaco .."); // there's no racket language support diff --git a/ui/src/index.css b/ui/src/index.css index 254b23a2..3e3b6a19 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -10,23 +10,4 @@ body { code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; -} - - -.paneContextMenu > li { - cursor: default; - font-family: sans-serif; - border: 0; - padding: 5px; - display: flex; - align-items: left; -} - -.paneContextMenu > li > .icon { - margin-right: 10px; -} - -.paneContextMenu > li:hover { - background:#f1f3f7; - color: #4b00ff; } \ No newline at end of file diff --git a/ui/src/lib/store.tsx b/ui/src/lib/store.tsx index c145324f..4a014e34 100644 --- a/ui/src/lib/store.tsx +++ b/ui/src/lib/store.tsx @@ -15,8 +15,9 @@ import { import { createRuntimeSlice, RuntimeSlice } from "./runtime"; import { ApolloClient } from "@apollo/client"; -export const RepoContext = - createContext | null>(null); +export const RepoContext = createContext | null>(null); // TODO use a selector to compute and retrieve the status // TODO this need to cooperate with syncing indicator @@ -67,7 +68,7 @@ const initialState = { queueProcessing: false, socket: null, socketIntervalId: null, - showLineNumbers: true + showLineNumbers: true, }; export type Pod = {