New mobx state tree & bug fixes (codesandbox#998)

Author: CompuIves

packages/app/package.json

@@ -162,9 +162,9 @@
     "lru-cache": "^4.1.3",
     "match-sorter": "^1.8.1",
     "memoize-one": "^4.0.0",
-    "mobx": "^3.4.0",
-    "mobx-react": "^4.3.5",
-    "mobx-state-tree": "^1.2.1",
+    "mobx": "^4.0.0",
+    "mobx-react": "^5.2.3",
+    "mobx-state-tree": "^3.0.0",
     "moment": "^2.18.1",
     "monaco-editor": "^0.13.1",
     "monaco-editor-textmate": "^2.0.0",

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -127,11 +127,11 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   syntaxWorker: ?Worker;
   lintWorker: ?Worker;
   typingsFetcherWorker: ?Worker;
-  sizeProbeInterval: ?number;
   editor: any;
   monaco: any;
   receivingCode: ?boolean = false;
   transpilationListener: ?Function;
+  sizeProbeInterval: ?number;
 
   constructor(props: Props) {
     super(props);
@@ -164,7 +164,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       this.props.width !== nextProps.width ||
       this.props.height !== nextProps.height
     ) {
-      this.resizeEditor();
+      this.resizeEditorInstantly();
     }
 
     if (this.props.readOnly !== nextProps.readOnly && this.editor) {
@@ -195,7 +195,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     if (this.transpilationListener) {
       this.transpilationListener();
     }
-    clearTimeout(this.sizeProbeInterval);
+    clearInterval(this.sizeProbeInterval);
 
     if (this.disposeInitializer) {
       this.disposeInitializer();
@@ -256,7 +256,10 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     // this.addKeyCommands();
 
     window.addEventListener('resize', this.resizeEditor);
-    this.sizeProbeInterval = setInterval(this.resizeEditor.bind(this), 3000);
+    this.sizeProbeInterval = setInterval(
+      this.resizeEditorInstantly.bind(this),
+      3000
+    );
 
     const { dependencies } = this;
     if (dependencies != null) {
@@ -1224,10 +1227,12 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       forceMoveMarkers: false,
     };
 
-    // For the live operation we need to send the operation based on the old code,
-    // that's why we set the 'liveOperationCode' to the last code so the operation
-    // will be applied on that code instead of `currentModule.code`
-    this.liveOperationCode = this.getCode();
+    if (!this.receivingCode) {
+      // For the live operation we need to send the operation based on the old code,
+      // that's why we set the 'liveOperationCode' to the last code so the operation
+      // will be applied on that code instead of `currentModule.code`
+      this.liveOperationCode = this.getCode();
+    }
 
     this.editor.getModel().pushEditOperations([], [editOperation], null);
     this.editor.setPosition(pos);
@@ -1359,6 +1364,10 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     Promise.all(modules.map(module => this.createModel(module, modules)));
 
   resizeEditor = () => {
+    this.resizeEditorInstantly();
+  };
+
+  resizeEditorInstantly = () => {
     this.forceUpdate(() => {
       if (this.editor) {
         this.editor.layout();

packages/app/src/app/components/ContextMenu/index.js

@@ -120,7 +120,7 @@ class ContextMenu extends React.PureComponent {
           onMouseDown={e => {
             e.preventDefault();
           }}
-          onClick={e => {
+          onMouseUp={e => {
             if (item.action()) {
               e.preventDefault();
               this.close();

packages/app/src/app/components/Preview/Navigator/ExternalOpen.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import IconBase from 'react-icons/lib/IconBase';
+
+export default props => (
+  <IconBase
+    width="1em"
+    height="1em"
+    viewBox="0 0 12 12"
+    version="1.1"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}
+  >
+    <path
+      d="M1.50001 0H0L1.43051e-06 6.90909C1.43051e-06 7.50909 0.49091 8 1.09091 8L8.5 8V6.5H1.50001L1.50001 0Z"
+      transform="translate(0 4)"
+      fill="currentColor"
+    />
+    <rect
+      width="9.5"
+      height="9.5"
+      rx="1"
+      transform="translate(2.5)"
+      fill="currentColor"
+    />
+  </IconBase>
+);

packages/app/src/app/components/Preview/Navigator/HorizontalAlign.js

@@ -5,15 +5,14 @@ export default props => (
   <IconBase
     width="1em"
     height="1em"
-    viewBox="0 0 16 16"
+    viewBox="0 0 12 12"
     version="1.1"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}
   >
     <path
-      d="M2.25 8.75v-1.5h11.5v1.5H2.25zm1.25-1.5v5.25h9V7.25h-9zM3 2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"
+      d="M1.5 1.5V7.5H10.5V1.5H1.5ZM1 0H11C11.5523 0 12 0.447715 12 1V11C12 11.5523 11.5523 12 11 12H1C0.447715 12 0 11.5523 0 11V1C0 0.447715 0.447715 0 1 0Z"
       fill="currentColor"
-      fillRule="nonzero"
     />
   </IconBase>
 );

packages/app/src/app/components/Preview/Navigator/VerticalAlign.js

@@ -5,15 +5,15 @@ export default props => (
   <IconBase
     width="1em"
     height="1em"
-    viewBox="0 0 16 16"
+    viewBox="0 0 12 12"
     version="1.1"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     {...props}
   >
     <path
-      d="M7.25 2.735h1.5V12.75h-1.5V2.735zm0 .765v9h5.25v-9H7.25zM3 2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"
+      d="M5.25 1.5V10.5H10.5V1.5H5.25ZM1 9.53674e-07H11C11.5523 9.53674e-07 12 0.447716 12 1V11C12 11.5523 11.5523 12 11 12H1C0.447715 12 0 11.5523 0 11V1C0 0.447716 0.447715 9.53674e-07 1 9.53674e-07Z"
+      transform="translate(12 12) rotate(-180)"
       fill="currentColor"
-      fillRule="nonzero"
     />
   </IconBase>
 );

packages/app/src/app/components/Preview/Navigator/elements.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   display: flex;
@@ -37,6 +37,12 @@ export const Icon = styled.button`
       background-color: #e2e2e2;
       cursor: pointer;
     }`};
+
+  ${props =>
+    props.selected &&
+    css`
+      color: ${props.theme.secondary()};
+    `};
 `;
 
 export const AddressBarContainer = styled.div`

packages/app/src/app/components/Preview/Navigator/external-open.svg

@@ -3,14 +3,14 @@ import React from 'react';
 import LeftIcon from 'react-icons/lib/fa/angle-left';
 import RightIcon from 'react-icons/lib/fa/angle-right';
 import RefreshIcon from 'react-icons/lib/md/refresh';
-import ExternalIcon from 'react-icons/lib/md/open-in-new';
 
 import Switch from 'common/components/Switch';
 import Tooltip from 'common/components/Tooltip';
 
 import HorizontalAlign from './HorizontalAlign';
 import VerticalAlign from './VerticalAlign';
 import AddressBar from '../AddressBar';
+import ExternalIcon from './ExternalOpen';
 import {
   Container,
   Icons,
@@ -32,6 +32,7 @@ function Navigator({
   zenMode,
   alignRight,
   alignBottom,
+  alignDirection,
 }) {
   return (
     <Container className="flying-container-handler" style={{ cursor: 'move' }}>
@@ -53,31 +54,38 @@ function Navigator({
       >
         <AddressBar url={url} onChange={onChange} onConfirm={onConfirm} />
       </AddressBarContainer>
-      {!zenMode &&
-        alignBottom && (
-          <Icon onClick={alignBottom}>
-            <Tooltip title="Align To Bottom">
-              <HorizontalAlign />
-            </Tooltip>
-          </Icon>
-        )}
-      {!zenMode &&
-        alignRight && (
-          <Icon onClick={alignRight}>
-            <Tooltip title="Align To Right">
-              <VerticalAlign />
-            </Tooltip>
-          </Icon>
-        )}
-
-      {!zenMode &&
-        openNewWindow && (
-          <Icon style={{ marginRight: '0.75rem' }} onClick={openNewWindow}>
-            <Tooltip title="Open In A New Window">
-              <ExternalIcon />
-            </Tooltip>
-          </Icon>
-        )}
+      {alignBottom && (
+        <Icon
+          style={{ fontSize: 18, padding: 4, marginRight: 4 }}
+          selected={alignDirection === 'bottom'}
+          onClick={alignBottom}
+        >
+          <Tooltip title="Dock to Bottom">
+            <HorizontalAlign />
+          </Tooltip>
+        </Icon>
+      )}
+      {alignRight && (
+        <Icon
+          style={{ fontSize: 18, padding: 4, marginRight: 4 }}
+          selected={alignDirection === 'right'}
+          onClick={alignRight}
+        >
+          <Tooltip title="Dock to Right">
+            <VerticalAlign />
+          </Tooltip>
+        </Icon>
+      )}
+      {openNewWindow && (
+        <Icon
+          style={{ fontSize: 18, padding: 4, marginRight: zenMode ? 8 : 16 }}
+          onClick={openNewWindow}
+        >
+          <Tooltip title="Open In New Window">
+            <ExternalIcon />
+          </Tooltip>
+        </Icon>
+      )}
       {!zenMode &&
         toggleProjectView && (
           <SwitchContainer>