Remove mobx and legacy version (#309)

* Remove legacy version

* Remove mobx so we can write some tests

Author: lewish

MODULE.bazel.lock

@@ -20,22 +20,20 @@ ts_library(
     deps = [
         "//:node_modules/@material-ui/core",
         "//:node_modules/@material-ui/icons",
-        "//:node_modules/@types/js-base64",
         "//:node_modules/@types/pako",
         "//:node_modules/@types/react",
         "//:node_modules/@types/react-dom",
         "//:node_modules/@types/react-router",
         "//:node_modules/@types/react-router-dom",
         "//:node_modules/@types/uuid",
         "//:node_modules/js-base64",
-        "//:node_modules/mobx",
-        "//:node_modules/mobx-react",
         "//:node_modules/pako",
         "//:node_modules/react",
         "//:node_modules/react-dom",
         "//:node_modules/react-router",
         "//:node_modules/react-router-dom",
         "//:node_modules/uuid",
+        "//common",
     ],
 )
 

client/BUILD

@@ -9,11 +9,12 @@ import {
 import { Drawer } from "#asciiflow/client/drawer";
 import { DrawingId, store, ToolMode } from "#asciiflow/client/store";
 import { screenToCell, View } from "#asciiflow/client/view";
-import { useObserver } from "mobx-react";
+
 import { HashRouter, Route, useParams } from "react-router-dom";
 import * as ReactDOM from "react-dom";
 import { Vector } from "#asciiflow/client/vector";
 import { textToLayer } from "#asciiflow/client/text_utils";
+import { useWatchable } from "#asciiflow/common/watchable";
 
 const controller = new Controller();
 const touchController = new TouchController(controller);
@@ -25,7 +26,7 @@ export interface IRouteProps {
 }
 
 export const App = () => {
-  return useObserver(() => {
+  return useWatchable(() => {
     const routeProps = useParams<IRouteProps>();
     store.setRoute(
       routeProps.share
@@ -86,7 +87,7 @@ document.addEventListener("paste", (e) => {
   if (store.selectTool.selectBox) {
     position = store.selectTool.selectBox.topLeft();
   }
-  if (store.toolMode === ToolMode.TEXT && store.textTool.currentPosition) {
+  if (store.toolMode.get() === ToolMode.TEXT && store.textTool.currentPosition) {
     position = store.textTool.currentPosition;
   }
   const pastedLayer = textToLayer(clipboardText, position);

client/app.tsx

@@ -1,7 +1,7 @@
 import * as constants from "#asciiflow/client/constants";
 import { store, IModifierKeys, ToolMode } from "#asciiflow/client/store";
 import { Vector } from "#asciiflow/client/vector";
-import { screenToCell } from "#asciiflow/client/view";
+import { screenToCell, setCanvasCursor } from "#asciiflow/client/view";
 import { HTMLAttributes } from "react";
 
 import * as React from "react";
@@ -69,7 +69,7 @@ export class Controller {
     let specialKeyCode = null;
 
     if (event.altKey) {
-      store.altPressed = true;
+      store.altPressed.set(true);
       if (event.keyCode === "1".charCodeAt(0)) {
         store.setToolMode(ToolMode.BOX);
         event.preventDefault();
@@ -140,7 +140,7 @@ export class Controller {
       specialKeyCode = constants.KEY_RIGHT;
     }
     if (event.keyCode === 32) {
-      store.panning = true;
+      store.panning.set(true);
     }
 
     if (specialKeyCode != null) {
@@ -150,10 +150,10 @@ export class Controller {
 
   handleKeyUp(event: KeyboardEvent) {
     if (event.keyCode === 32) {
-      store.panning = false;
+      store.panning.set(false);
     }
     if (!event.altKey) {
-      store.altPressed = false;
+      store.altPressed.set(false);
     }
   }
 
@@ -167,10 +167,9 @@ export class Controller {
 
     // Update the cursor pointer, depending on the draw function.
     if (!moveCell.equals(this.lastMoveCell)) {
-      store.setCurrentCursor(store.currentTool.getCursor(
-        moveCell,
-        getModifierKeys(e)
-      ));
+      setCanvasCursor(
+        store.currentTool.getCursor(moveCell, getModifierKeys(e))
+      );
     }
 
     // In drawing mode, so pass the mouse move on, but remove duplicates.
@@ -214,7 +213,7 @@ export class DesktopController {
 
   handleMouseDown = (e: React.MouseEvent<any>) => {
     // Can drag by holding either the control or meta (Apple) key.
-    if (store.panning) {
+    if (store.panning.get()) {
       this.controller.startDrag(Vector.fromMouseEvent(e));
     } else {
       this.controller.startDraw(Vector.fromMouseEvent(e), e);

client/controller.ts

@@ -8,13 +8,13 @@ export class DrawFreeform extends AbstractDrawFunction {
 
   start(position: Vector) {
     this.currentLayer = new Layer();
-    this.currentLayer.set(position, store.freeformCharacter);
+    this.currentLayer.set(position, store.freeformCharacter.get());
     store.currentCanvas.setScratchLayer(this.currentLayer);
   }
 
   move(position: Vector) {
     [this.currentLayer] = new Layer().apply(this.currentLayer);
-    this.currentLayer.set(position, store.freeformCharacter);
+    this.currentLayer.set(position, store.freeformCharacter.get());
     store.currentCanvas.setScratchLayer(this.currentLayer);
   }
 
@@ -29,7 +29,7 @@ export class DrawFreeform extends AbstractDrawFunction {
   handleKey(value: string) {
     if (value && value.length === 1) {
       // The value is not a special character, so lets use it.
-      store.freeformCharacter = value;
+      store.freeformCharacter.set(value);
     }
   }
 }

client/draw/freeform.ts

@@ -4,10 +4,9 @@ import {
   connects,
   disconnect,
 } from "#asciiflow/client/characters";
+import { UNICODE } from "#asciiflow/client/constants";
 import { Direction } from "#asciiflow/client/direction";
-import {
-  AbstractDrawFunction
-} from "#asciiflow/client/draw/function";
+import { AbstractDrawFunction } from "#asciiflow/client/draw/function";
 import { line } from "#asciiflow/client/draw/utils";
 import { Layer, LayerView } from "#asciiflow/client/layer";
 import { cellContext } from "#asciiflow/client/render_layer";
@@ -35,9 +34,12 @@ export class DrawLine extends AbstractDrawFunction {
   }
 
   draw(modifierKeys: IModifierKeys) {
+    if (!this.startPosition || !this.endPosition) {
+      return;
+    }
     const layer = new Layer();
     // Try to infer line orientation.
-    const characters = store.characters;
+    const characters = UNICODE;
     const startContext = cellContext(
       this.startPosition,
       store.currentCanvas.committed

client/draw/line.ts

@@ -49,8 +49,6 @@ export class DrawMove extends AbstractDrawFunction {
         .filter((a) => a.direction === Direction.DOWN)
         .map((a) => a.end.y)
     );
-    console.log(minX, maxX, minY, maxY);
-    console.log(this.trace);
     // Calculate the effective position after calculating bounds.
     const effectivePosition = new Vector(
       Math.min(Math.max(position.x, minX), maxX),

client/draw/move.ts

@@ -11,7 +11,7 @@ import { AbstractDrawFunction } from "#asciiflow/client/draw/function";
 import { DrawMove } from "#asciiflow/client/draw/move";
 import { Layer } from "#asciiflow/client/layer";
 import { snap } from "#asciiflow/client/snap";
-import { IModifierKeys, store } from "#asciiflow/client/store";
+import { IModifierKeys, store, ToolMode } from "#asciiflow/client/store";
 import { layerToText, textToLayer } from "#asciiflow/client/text_utils";
 import { Vector } from "#asciiflow/client/vector";
 
@@ -139,7 +139,7 @@ export class DrawSelect extends AbstractDrawFunction {
     return "default";
   }
 
-  handleKey(value: string) {
+  handleKey(value: string, modifierKeys: IModifierKeys) {
     if (this.selectBox != null) {
       // Use the native keyboard for copy pasting.
       if (value === KEY_COPY || value === KEY_CUT) {
@@ -176,5 +176,8 @@ export class DrawSelect extends AbstractDrawFunction {
       store.currentCanvas.setScratchLayer(layer);
       store.currentCanvas.commitScratch();
     }
+
+    // store.setToolMode(ToolMode.TEXT);
+    // store.currentTool.handleKey(value, modifierKeys);
   }
 }

client/draw/select.ts

@@ -24,6 +24,9 @@ export class DrawText extends AbstractDrawFunction {
   }
 
   handleKey(value: string, modifierKeys: IModifierKeys) {
+    if (!this.currentPosition) {
+      return;
+    }
     let newLayer = new Layer();
     if (!!this.textLayer) {
       [newLayer] = newLayer.apply(this.textLayer);

client/draw/text.ts

@@ -5,6 +5,7 @@ import styles from "#asciiflow/client/drawer.module.css";
 import { ExportDialog } from "#asciiflow/client/export";
 import { DrawingId, store, ToolMode } from "#asciiflow/client/store";
 import { DrawingStringifier } from "#asciiflow/client/store/drawing_stringifier";
+import { useWatchable } from "#asciiflow/common/watchable";
 import {
   Button,
   Chip,
@@ -21,17 +22,16 @@ import {
   Paper,
   Popover,
   Snackbar,
-  TextField
+  TextField,
 } from "@material-ui/core";
 import * as Icons from "@material-ui/icons";
-import { useObserver } from "mobx-react";
 import * as React from "react";
 import { useState } from "react";
 import { useHistory } from "react-router";
 
 export function Drawer() {
   const history = useHistory();
-  return useObserver(() => {
+  return useWatchable(() => {
     if (!store.controlsOpen.get()) {
       return (
         <Fab
@@ -77,7 +77,7 @@ export function Drawer() {
                         <Icons.GetApp />
                       </IconButton>
                     }
-                    drawingId={store.route}
+                    drawingId={store.route.get()}
                   />
 
                   <NewDrawingButton />
@@ -218,14 +218,15 @@ export function Drawer() {
                   </IconButton>
                 </ListItemSecondaryAction>
               </ListItem>
-              {!store.editControlsOpen.get() ? null : store.route.shareSpec ? (
+              {!store.editControlsOpen.get() ? null : store.route.get()
+                  .shareSpec ? (
                 <>
                   <div className={styles.helpText}>
                     This is a shared drawing. To make edits fork it so it can be
                     saved locally.
                   </div>
                   <div className={styles.helpText}>
-                    <ForkDrawingButton drawingId={store.route} />
+                    <ForkDrawingButton drawingId={store.route.get()} />
                   </div>
                 </>
               ) : (
@@ -375,7 +376,7 @@ export function Drawer() {
                   <ShortcutChip label={"arrow keys"} /> to move around.
                 </ToolHelp>{" "}
                 Pan around the canvas by holding <ShortcutChip label="space" />
-                {store.route.shareSpec ? (
+                {store.route.get().shareSpec ? (
                   "."
                 ) : (
                   <>
@@ -386,9 +387,7 @@ export function Drawer() {
                     redo.
                   </>
                 )}{" "}
-                View shortcuts by pressing <ShortcutChip label={"alt"} />. You
-                can return to the previous version of ASCIIFlow{" "}
-                <a href="legacy">here</a>.
+                View shortcuts by pressing <ShortcutChip label={"alt"} />.
               </div>
             )}
           </>
@@ -412,8 +411,8 @@ function ShortcutChip({
   label: string;
   hideUntilAlt?: boolean;
 }) {
-  return useObserver(() => {
-    if (hideUntilAlt && !store.altPressed) return null;
+  return useWatchable(() => {
+    if (hideUntilAlt && !store.altPressed.get()) return null;
     return (
       <Chip
         icon={<Icons.KeyboardOutlined />}
@@ -433,10 +432,10 @@ function ToolControl(
     icon: React.ReactNode;
   }>
 ) {
-  return useObserver(() => {
+  return useWatchable(() => {
     return (
       <ListItem
-        selected={store.toolMode === props.tool}
+        selected={store.toolMode.get() === props.tool}
         button={true}
         onClick={() => store.setToolMode(props.tool)}
       >
@@ -458,15 +457,15 @@ const shortcutKeys = [
 ];
 function FreeFormCharacterSelect() {
   const [anchorEl, setAnchorEl] = useState(null);
-  return useObserver(() => {
+  return useWatchable(() => {
     return (
       <>
         <Button
           variant="outlined"
           className={styles.freeformCharacterButton}
           onClick={(event) => setAnchorEl(event.currentTarget)}
         >
-          {store.freeformCharacter}
+          {store.freeformCharacter.get()}
         </Button>
         <Popover
           open={!!anchorEl}
@@ -483,7 +482,7 @@ function FreeFormCharacterSelect() {
                 onClick={() => {
                   setAnchorEl(null);
                   store.setToolMode(ToolMode.FREEFORM);
-                  store.freeformCharacter = key;
+                  store.freeformCharacter.set(key);
                 }}
                 className={styles.freeformCharacterButton}
                 key={i}
@@ -503,8 +502,8 @@ function ToolHelp(
     tool: ToolMode;
   }>
 ) {
-  return useObserver(() => {
-    return store.toolMode === props.tool ? <>{props.children}</> : null;
+  return useWatchable(() => {
+    return store.toolMode.get() === props.tool ? <>{props.children}</> : null;
   });
 }
 

client/drawer.tsx

@@ -16,8 +16,8 @@ import { ASCII, UNICODE } from "#asciiflow/client/constants";
 import styles from "#asciiflow/client/export.module.css";
 import { DrawingId, store } from "#asciiflow/client/store";
 import { layerToText } from "#asciiflow/client/text_utils";
-import { useObserver } from "mobx-react";
 import * as React from "react";
+import { useWatchable } from "#asciiflow/common/watchable";
 
 export interface IExportConfig {
   wrapper?: "star" | "star-filled" | "triple-quotes" | "hash" | "slash" | "three-slashes" | "dash" | "apostrophe" | "semicolon" | "backticks" | "four-spaces";
@@ -32,7 +32,7 @@ export function ExportDialog({
   button: React.ReactNode;
   drawingId: DrawingId;
 }) {
-  return useObserver(() => {
+  return useWatchable(() => {
     const [open, setOpen] = React.useState(false);
     const exportConfig = store.exportConfig.get();
     // Only compute the text if the dialog is open.