feat(overmind): parallel statecharts

Author: christianalfoni

packages/node_modules/overmind-devtools-client/src/components/Chart/index.tsx

@@ -9,8 +9,8 @@ import * as styles from './styles'
 
 type Props = {
   chart: Chart
-  statePath: string[]
-  nestedChart?: NestedChart
+  statePath: (string | number)[]
+  nestedChart?: NestedChart | NestedChart[]
 }
 
 const ChartComponent: FunctionComponent<Props> = ({
@@ -20,20 +20,38 @@ const ChartComponent: FunctionComponent<Props> = ({
 }) => {
   const { state, actions } = useOvermind()
 
+  if (Array.isArray(nestedChart)) {
+    return (
+      <div className={styles.parallelWrapper}>
+        {nestedChart.map((nestedChartItem, index) => (
+          <div key={'parallel-' + index} className={styles.parallelSplitter}>
+            <ChartComponent
+              chart={chart}
+              statePath={statePath.concat(index)}
+              nestedChart={nestedChartItem}
+            />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
   return (
     <div className={styles.outerWrapper}>
       <div className={styles.wrapper}>
         {Object.keys(nestedChart.states).map((key) => {
-          const isCurrentState = chart.state
-            .join('.')
-            .startsWith(statePath.concat(key).join('.'))
+          const isActiveState = chart.states.reduce((aggr, state) => {
+            if (aggr) return true
+
+            return state.join('.').startsWith(statePath.concat(key).join('.'))
+          }, false)
           return (
             <div key={key} className={styles.stateItem}>
               <div className={styles.stateNameCell}>
                 <div
                   className={styles.stateName}
                   style={{
-                    backgroundColor: isCurrentState
+                    backgroundColor: isActiveState
                       ? nameToColor(chart.path.join('.'))
                       : null,
                   }}
@@ -45,7 +63,7 @@ const ChartComponent: FunctionComponent<Props> = ({
                 <div
                   className={styles.selectedLine}
                   style={{
-                    backgroundColor: isCurrentState
+                    backgroundColor: isActiveState
                       ? nameToColor(chart.path.join('.'))
                       : null,
                   }}
@@ -56,7 +74,7 @@ const ChartComponent: FunctionComponent<Props> = ({
                   <div
                     className={styles.stateAction}
                     style={{
-                      borderColor: isCurrentState
+                      borderColor: isActiveState
                         ? nameToColor(chart.path.join('.'))
                         : null,
                     }}
@@ -71,7 +89,7 @@ const ChartComponent: FunctionComponent<Props> = ({
                   <div
                     className={styles.selectedLine}
                     style={{
-                      backgroundColor: isCurrentState
+                      backgroundColor: isActiveState
                         ? nameToColor(chart.path.join('.'))
                         : null,
                     }}
@@ -82,7 +100,7 @@ const ChartComponent: FunctionComponent<Props> = ({
                 <div
                   className={styles.selectedLine}
                   style={{
-                    backgroundColor: isCurrentState
+                    backgroundColor: isActiveState
                       ? nameToColor(chart.path.join('.'))
                       : null,
                   }}
@@ -91,7 +109,7 @@ const ChartComponent: FunctionComponent<Props> = ({
               <div
                 className={styles.onCell}
                 style={{
-                  borderColor: isCurrentState
+                  borderColor: isActiveState
                     ? nameToColor(chart.path.join('.'))
                     : null,
                 }}
@@ -160,7 +178,7 @@ const ChartComponent: FunctionComponent<Props> = ({
                   <div
                     className={styles.selectedLine}
                     style={{
-                      backgroundColor: isCurrentState
+                      backgroundColor: isActiveState
                         ? nameToColor(chart.path.join('.'))
                         : null,
                     }}
@@ -174,7 +192,7 @@ const ChartComponent: FunctionComponent<Props> = ({
                   <div
                     className={styles.stateAction}
                     style={{
-                      borderColor: isCurrentState
+                      borderColor: isActiveState
                         ? nameToColor(chart.path.join('.'))
                         : null,
                     }}

packages/node_modules/overmind-devtools-client/src/components/Chart/styles.ts

@@ -2,6 +2,14 @@ import { css } from 'emotion'
 
 import { colors } from '../../theme'
 
+export const parallelWrapper = css({
+  padding: '0.5rem',
+})
+
+export const parallelSplitter = css({
+  borderBottom: `2px dashed ${colors.foreground}`,
+})
+
 export const outerWrapper = css({
   overflowY: 'scroll',
   boxSizing: 'border-box',

packages/node_modules/overmind-devtools-client/src/components/SplitPane/index.tsx

@@ -0,0 +1,75 @@
+import { Child, createElement } from 'overmind-components'
+
+import { Component } from '../../overmind'
+import * as styles from './styles'
+
+type Props = {
+  children: [Child, Child]
+  minSize: number
+  defaultSize: number
+  onChange: (size: number) => void
+}
+
+type State = {
+  isDragging: boolean
+  size: number
+  initialSize: number
+  initialX: number
+}
+
+const SplitPane: Component<Props, State> = (
+  { onChange, minSize, children },
+  { state, changeState }
+) => {
+  return (
+    <self
+      onMount={() => {
+        function onMouseMove(event: MouseEvent) {
+          if (state.isDragging) {
+            const newSize = state.initialSize - (state.initialX - event.clientX)
+            changeState({
+              size: Math.max(newSize, minSize),
+            })
+          }
+        }
+
+        window.addEventListener('mousemove', onMouseMove)
+
+        return () => {
+          window.removeEventListener('mousemove', onMouseMove)
+        }
+      }}
+      className={styles.wrapper}
+    >
+      <div
+        style={{
+          width: state.size + 'px',
+        }}
+      >
+        {children[0]}
+      </div>
+      <div
+        className={styles.splitter}
+        onMouseDown={(event) => {
+          changeState({ isDragging: true, initialX: event.clientX })
+        }}
+        onMouseUp={() => {
+          changeState({
+            isDragging: false,
+          })
+          onChange(state.size)
+        }}
+      />
+      <div>{children[1]}</div>
+    </self>
+  )
+}
+
+SplitPane.initialState = ({ defaultSize }) => ({
+  isDragging: false,
+  size: defaultSize,
+  initialSize: defaultSize,
+  initialX: 0,
+})
+
+export default SplitPane

packages/node_modules/overmind-devtools-client/src/components/SplitPane/styles.ts

@@ -0,0 +1,16 @@
+import { css } from 'emotion'
+
+import { colors } from '../../theme'
+
+export const wrapper = css({
+  padding: '2rem',
+  display: 'flex',
+})
+
+export const splitter = css({
+  width: 3,
+  backgroundColor: colors.foreground,
+  cursor: 'col-resize',
+  margin: '0 0.5rem',
+  userSelect: 'none',
+})

packages/node_modules/overmind-devtools-client/src/overmind/types.ts

@@ -394,7 +394,7 @@ export type NestedChart = {
     [key: string]: {
       entry?: string
       exit?: string
-      chart?: NestedChart
+      chart?: NestedChart | NestedChart[]
       on?: {
         [key: string]:
           | string
@@ -408,8 +408,8 @@ export type NestedChart = {
 
 export type Chart = {
   path: string[]
-  state: string[]
-  chart: NestedChart
+  states: Array<string[]>
+  chart: NestedChart | NestedChart[]
   actions: {
     [name: string]: boolean
   }