Local FS UI (#419)

---------

Co-authored-by: David Souther <[email protected]>

components/src/chips/memory.tsx

@@ -193,6 +193,7 @@ export const Memory = forwardRef(
  showClear = true,
  onChange = undefined,
  onClear = undefined,
+ loadTooltip = undefined,
  }: {
  name?: string;
  className?: string;
@@ -212,6 +213,7 @@ export const Memory = forwardRef(
  showClear?: boolean;
  onChange?: () => void;
  onClear?: () => void;
+ loadTooltip?: { value: string; placement: string };
  },
  ref,
  ) => {
@@ -306,8 +308,8 @@ export const Memory = forwardRef(
  <button
  onClick={doLoad}
  className="flex-0"
- data-tooltip={"Load file"}
- data-placement="bottom"
+ data-tooltip={loadTooltip?.value ?? "Load file"}
+ data-placement={loadTooltip?.placement ?? "bottom"}
  >
  {/* <Icon name="upload_file" /> */}
  📂

components/src/stores/vm.store.ts

@@ -48,7 +48,6 @@ export interface VmSim {
 
 export interface VMTestSim {
  highlight: Span | undefined;
- path: string;
 }
 
 export interface VmPageState {
@@ -163,9 +162,6 @@ export function makeVmStore(
  }
  state.controls.error = error;
  },
- setPath(state: VmPageState, path: string) {
- state.test.path = path;
- },
  update(state: VmPageState) {
  state.vm = reduceVMTest(test, dispatch, setStatus, showHighlight);
  state.test.highlight = test.currentStep?.span;
@@ -203,7 +199,6 @@ export function makeVmStore(
  },
  test: {
  highlight: undefined,
- path: "/",
  },
  files: {
  vm: "",

web/src/languages/tst.ts

@@ -5,6 +5,8 @@ export const TstLanguage: monaco.languages.IMonarchLanguage = {
 
  keywords: [
  "output-list",
+ "compare-to",
+ "output-file",
  "set",
  "eval",
  "output",

web/src/pages/asm.tsx

@@ -12,6 +12,7 @@ import { Panel } from "../shell/panel";
 import { LOADING } from "@nand2tetris/components/messages.js";
 import { ROM } from "@nand2tetris/simulator/cpu/memory";
 import { Link } from "react-router-dom";
+import { isPath } from "src/shell/file_select";
 import { AppContext } from "../App.context";
 import { PageContext } from "../Page.context";
 import URLs from "../urls";
@@ -21,6 +22,7 @@ export const Asm = () => {
  const { filePicker } = useContext(AppContext);
  const { stores, setTool } = useContext(PageContext);
  const { state, actions, dispatch } = stores.asm;
+ const { fs, localFsRoot } = useContext(BaseContext);
 
  const sourceCursorPos = useRef(0);
  const resultCursorPos = useRef(0);
@@ -62,15 +64,32 @@ export const Asm = () => {
  const path = await filePicker.select({ suffix: ".asm" });
  setStatus(LOADING);
  requestAnimationFrame(async () => {
- await actions.loadAsm(path);
+ await actions.loadAsm(path.path);
  setStatus("");
  dispatch.current({
  action: "setTitle",
- payload: path.split("/").pop() ?? "",
+ payload: path.path.split("/").pop() ?? "",
  });
  });
  };
 
+ const loadCompare = async () => {
+ const filesRef = await filePicker.selectAllowLocal({ suffix: "hack" });
+ if (isPath(filesRef)) {
+ const cmp = await fs.readFile(filesRef.path);
+ dispatch.current({
+ action: "setCmp",
+ payload: { cmp, name: filesRef.path.split("/").pop() },
+ });
+ } else {
+ const file = Array.isArray(filesRef) ? filesRef[0] : filesRef;
+ dispatch.current({
+ action: "setCmp",
+ payload: { cmp: file.content, name: file.name },
+ });
+ }
+ };
+
  const { setStatus } = useContext(BaseContext);
 
  const downloadAsm = () =>
@@ -151,15 +170,17 @@ export const Asm = () => {
  />
  )}
  </div>
- <fieldset role="group">
- <button
- data-tooltip="Download"
- data-placement="left"
- onClick={downloadAsm}
- >
- ⬇️
- </button>
- </fieldset>
+ {!localFsRoot && (
+ <fieldset role="group">
+ <button
+ data-tooltip="Download"
+ data-placement="left"
+ onClick={downloadAsm}
+ >
+ ⬇️
+ </button>
+ </fieldset>
+ )}
  </>
  }
  >
@@ -217,13 +238,15 @@ export const Asm = () => {
  >
  ↩️
  </button>
- <button
- data-tooltip="Download"
- data-placement="left"
- onClick={downloadHack}
- >
- ⬇️
- </button>
+ {!localFsRoot && (
+ <button
+ data-tooltip="Download"
+ data-placement="left"
+ onClick={downloadHack}
+ >
+ ⬇️
+ </button>
+ )}
  </fieldset>
  </div>
  </>
@@ -278,11 +301,13 @@ export const Asm = () => {
  <Trans>Compare Code</Trans>
  {state.compareName && `: ${state.compareName}`}
  </div>
- <div>
- <fieldset role="group">
- <button onClick={compare}>Compare</button>
- </fieldset>
- </div>
+ <fieldset role="group">
+ <button onClick={loadCompare}>📂</button>
+ </fieldset>
+ <div className="flex-1" />
+ <fieldset role="group">
+ <button onClick={compare}>Compare</button>
+ </fieldset>
  </>
  }
  >
@@ -292,11 +317,9 @@ export const Asm = () => {
  highlightType={state.compareError ? "error" : "highlight"}
  alwaysRecenter={false}
  onChange={function (source: string): void {
- dispatch.current({
- action: "setCmp",
- payload: { cmp: source },
- });
+ return;
  }}
+ disabled={true}
  onCursorPositionChange={(index) => {
  if (index == resultCursorPos.current) {
  return;

web/src/pages/chip.tsx

@@ -80,7 +80,6 @@ export const Chip = () => {
  const hdlToCompile = state.controls.usingBuiltin
  ? files.hdl
  : files.hdl ?? hdl;
-
  await actions.updateFiles({
  hdl: hdlToCompile,
  tst: files.tst ?? tst,
@@ -142,12 +141,16 @@ export const Chip = () => {
 
  const loadFile = async () => {
  const path = await filePicker.select({ suffix: "hdl" });
- actions.loadChip(path);
+ actions.loadChip(path.path);
  };
 
  const selectors = (
  <>
- <fieldset role="group">
+ <fieldset
+ role="group"
+ data-tooltip="Open an HDL file using this menu"
+ data-placement="bottom"
+ >
  <select
  value={state.controls.project}
  onChange={({ target: { value } }) => {
@@ -157,7 +160,7 @@ export const Chip = () => {
  >
  {state.controls.projects.map((project) => (
  <option key={project} value={project}>
- {project}
+ {`Project ${project}`}
  </option>
  ))}
  </select>
@@ -206,7 +209,13 @@ export const Chip = () => {
  )}
  {selectors}
  <fieldset role="group">
- <button onClick={loadFile}>📂</button>
+ <button
+ data-tooltip="Open an HDL file directly"
+ data-placement="left"
+ onClick={loadFile}
+ >
+ 📂
+ </button>
  </fieldset>
  </>
  }
@@ -224,7 +233,7 @@ export const Chip = () => {
  }}
  grammar={HDL.parser}
  language={"hdl"}
- disabled={state.controls.usingBuiltin}
+ disabled={state.controls.usingBuiltin || state.controls.chipName == ""}
  />
  </Panel>
  );
@@ -309,21 +318,23 @@ export const Chip = () => {
  {state.sim.invalid ? (
  <Trans>Syntax errors in the HDL code or test</Trans>
  ) : (
- <>
- <PinContext.Provider value={pinResetDispatcher}>
- <FullPinout
- sim={state.sim}
- toggle={actions.toggle}
- setInputValid={setInputValid}
- hideInternal={state.controls.usingBuiltin}
- />
- </PinContext.Provider>
- {visualizations.length > 0 && (
- <Accordian summary={<Trans>Visualization</Trans>} open={true}>
- <main>{visualizations.map(([_, v]) => v)}</main>
- </Accordian>
- )}
- </>
+ state.controls.chipName != "" && (
+ <>
+ <PinContext.Provider value={pinResetDispatcher}>
+ <FullPinout
+ sim={state.sim}
+ toggle={actions.toggle}
+ setInputValid={setInputValid}
+ hideInternal={state.controls.usingBuiltin}
+ />
+ </PinContext.Provider>
+ {visualizations.length > 0 && (
+ <Accordian summary={<Trans>Visualization</Trans>} open={true}>
+ <main>{visualizations.map(([_, v]) => v)}</main>
+ </Accordian>
+ )}
+ </>
+ )
  )}
  </Panel>
  );

web/src/pages/compiler.tsx

@@ -18,13 +18,14 @@ import URLs from "../urls";
 import "./compiler.scss";
 
 export const Compiler = () => {
- const { setStatus } = useContext(BaseContext);
+ const { setStatus, canUpgradeFs } = useContext(BaseContext);
  const { tracking } = useContext(AppContext);
  const { stores, setTool } = useContext(PageContext);
  const { state, dispatch, actions } = stores.compiler;
 
  const [selected, setSelected] = useState(0);
  const [suppressStatus, setSuppressStatus] = useState(false);
+ const [editable, setEditable] = useState(false);
 
  const redirectRef = useRef<HTMLAnchorElement>(null);
 
@@ -57,28 +58,46 @@ export const Compiler = () => {
  setSelected(Object.keys(state.files).indexOf(state.selected));
  }, [state.selected]);
 
- const uploadFiles = async () => {
- const handle = await openNand2TetrisDirectory();
- const fs = new FileSystem(new FileSystemAccessFileSystemAdapter(handle));
-
- dispatch.current({
- action: "setTitle",
- payload: `${handle.name} / *.jack`,
- });
+ const loadRef = useRef<HTMLInputElement>(null);
 
- const empty =
- (await fs.scandir("/")).filter(
- (entry) => entry.isFile() && entry.name.endsWith(".jack"),
- ).length == 0;
+ const uploadFiles = async () => {
+ if (canUpgradeFs) {
+ const handle = await openNand2TetrisDirectory();
+ const fs = new FileSystem(new FileSystemAccessFileSystemAdapter(handle));
+ const empty =
+ (await fs.scandir("/")).filter(
+ (entry) => entry.isFile() && entry.name.endsWith(".jack"),
+ ).length == 0;
 
- if (empty) {
- setStatus("No .jack files in the selected folder");
- setSuppressStatus(true);
+ if (empty) {
+ setStatus("No .jack files in the selected folder");
+ setSuppressStatus(true);
+ } else {
+ setStatus("");
+ actions.loadProject(fs, `${handle.name} / *.jack`);
+ setEditable(true);
+ }
  } else {
- setStatus("");
- setSuppressStatus(false);
+ loadRef.current?.click();
+ setEditable(false);
+ }
+ };
+
+ const onLoad = async () => {
+ if (
+ !loadRef.current ||
+ !loadRef.current?.files ||
+ loadRef.current.files?.length == 0
+ ) {
+ return;
  }
- actions.loadProject(fs, `${handle.name} / *.jack`);
+ const files: Record<string, string> = {};
+ for (const file of loadRef.current.files) {
+ if (file.name.endsWith(".jack")) {
+ files[file.name.replace(".jack", "")] = await file.text();
+ }
+ }
+ actions.loadFiles(files);
  };
 
  const compileAll = (): VmFile[] => {
@@ -147,6 +166,13 @@ export const Compiler = () => {
 
  return (
  <div className="Page CompilerPage grid">
+ <input
+ type="file"
+ ref={loadRef}
+ webkitdirectory=""
+ onChange={onLoad}
+ style={{ display: "none" }}
+ ></input>
  <Link
  ref={redirectRef}
  to={URLs["vm"].href}
@@ -221,6 +247,7 @@ export const Compiler = () => {
  }}
  error={state.compiled[file].error}
  language={"jack"}
+ disabled={!editable}
  />
  </Tab>
  ))}