bottom/left/right docking to the Dock view

src/components/Divider/index.js

@@ -7,8 +7,8 @@ export const DividerContainer = styled.div`
   ${ p => p.css }
 `
 
-const HORIZONTAL = Symbol('DIVIDER_HORIZONTAL')
-const VERTICAL = Symbol('DIVIDER_VERTICAL')
+export const HORIZONTAL = Symbol('DIVIDER_HORIZONTAL')
+export const VERTICAL = Symbol('DIVIDER_VERTICAL')
 
 class Divider extends React.Component {
 

src/components/Dock/Dock.js

@@ -1,5 +1,7 @@
 import React from 'react'
-import Divider from '../Divider'
+import Divider, { VERTICAL, HORIZONTAL } from '../Divider'
+import MenuDropdown from '../MenuDropdown'
+import { IconMenu } from '../Icons'
 import {
     cssResize,
     DockContainer,
@@ -16,9 +18,10 @@ class Dock extends React.Component {
     node = null
 
     state = {
-        visible: false,
+        visible: true,
         width: 500,
-        isResizing: false
+        isResizing: false,
+        position: 'right'
     }
 
     handleKeyUp = (e) => ((e.keyCode === KEY_CODE_F9) ? this.onToggleDock() : null)  //F9
@@ -33,6 +36,8 @@ class Dock extends React.Component {
         })
     }
 
+    setPosition = (position) => this.setState({ position })
+
     onResizeStart = () => {
         this.widthOrigin = this.state.width
         this.setState({isResizing: true})
@@ -43,6 +48,8 @@ class Dock extends React.Component {
     }
 
     onResize = deltaX => {
+        if (this.state.position === 'left') deltaX = -deltaX
+
         this.setState(state => {
             return {
                 width: Math.max(0, this.widthOrigin + deltaX)
@@ -51,20 +58,43 @@ class Dock extends React.Component {
     }
 
     render() {
+        let width, height
+
+        switch (this.state.position) {
+            case 'right':
+            case 'left':
+                width = this.state.width
+                height = '100%'
+                break;
+            case 'bottom':
+                width = '100%'
+                height = this.state.width
+        }
+
         const style = {
-            width: this.state.visible ? this.state.width : 0
+            width: this.state.visible ? width : 0,
+            height: this.state.visible ? height : 0
         }
 
         return (
             <DockContainer>
-                <DockPanel resizing={this.state.isResizing} style={style}>
+                <DockPanel
+                    resizing={this.state.isResizing}
+                    style={style}
+                    position={this.state.position}
+                >
                     <DockOverlay />
+                    <MenuDropdown
+                        position={this.state.position}
+                        setPosition={this.setPosition}
+                    />
                     {this.state.visible ? <DockToggle onClick={this.onToggleDock}>Toggle</DockToggle> : null}
                     <Divider
-                        css={cssResize}
+                        css={cssResize(this.state.position)}
                         onResizeStart={this.onResizeStart}
                         onResize={this.onResize}
                         onResizeEnd={this.onResizeEnd}
+                        orientation={this.state.position === 'bottom' ? HORIZONTAL : VERTICAL}
                     />
                     <DockPanelBody>
                         {this.props.children}

src/components/Dock/styles.js

@@ -1,15 +1,39 @@
 import styled, { css } from 'styled-components'
 
-export const cssResize = css`
-  position: absolute;
-  opacity: 0;
+const resizeLeft = css`
   left: -5px;
   width: 10px;
   top: 0;
   height: 100%;
   cursor: col-resize;
 `
 
+const resizeRight = css`
+  right: -5px;
+  width: 10px;
+  top: 0;
+  height: 100%;
+  cursor: col-resize;
+`
+
+const resizeTop = css`
+  top: -5px;
+  height: 10px;
+  left: 0;
+  width: 100%;
+  cursor: row-resize;
+`
+
+export const cssResize = (pos) => css`
+  position: absolute;
+  opacity: 0;
+
+  ${pos === 'right' ? resizeLeft :
+    pos === 'left' ? resizeRight :
+    resizeTop // pos === 'bottom'
+  }
+`
+
 export const DockContainer = styled.div`
   position: fixed;
   width: 0px;
@@ -32,22 +56,36 @@ export const DockOverlay = styled.div`
 `
 
 export const DockToggle = styled.button`
-  position: fixed;
+  position: absolute;
   top: 0;
   right: 0;
   z-index: 1;
-  margin: 2px;
+  margin: 3px;
 `
 
 export const DockPanel = styled.div`
   position: fixed;
   z-index: 1;
   box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 4px;
   background: white;
-  right: 0;
-  top: 0px;
-  width: 40%;
-  height: 100%;
+  bottom: 0;
+
+  ${p => p.position === 'bottom' ?
+      css`
+        left: 0;
+        height: 400px;
+      `:
+    p.position === 'left' ?
+      css`
+        left: 0;
+        height: 100%;
+      `:
+    // p.position === 'right'
+      css`
+        right: 0;
+        height: 100%;
+      `
+	}
 
   ${p => p.resizing ?
       css`

src/components/MenuDropdown/DockIcon.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+const IconWrapper = styled.div`
+	padding: 5px;
+	margin: 0 5px;
+	${p => p.active ? css`background-color: #DDDDDD`: ''};
+
+	&:hover {
+		cursor: pointer;
+	}
+`
+
+const IconOutline = styled.div`
+	position: relative;
+	width: 15px;
+	height: 10px;
+	border: 2px solid #888888;
+`
+
+const IconInner = styled.div`
+	position: absolute;
+	width: ${p => p.position === 'bottom' ? '100%' : '40%'};
+	height: ${p => p.position === 'bottom' ? '40%' : '100%'};
+	bottom: 0;
+	background-color: #888888;
+	${p => p.position === 'bottom' || p.position === 'left' ?
+			css`
+				left: 0;
+			`:
+			css`
+				right: 0;
+			`
+	}
+`
+
+export const DockIcon = ({ active, position, select }) => (
+	<IconWrapper active={active} onClick={select}>
+		<IconOutline>
+			<IconInner position={position} />
+		</IconOutline>
+	</IconWrapper>
+)
+
+DockIcon.propTypes = {
+	active: PropTypes.bool.isRequired,
+	position: PropTypes.string.isRequired,
+	select: PropTypes.func.isRequired
+}

src/components/MenuDropdown/MenuDropdown.js

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { DockIcon } from './DockIcon'
+import {
+	MenuContainer,
+	MenuButton,
+	DropdownContainer,
+	DropdownItem,
+	Label,
+} from './styles'
+
+const positions = ['left', 'bottom', 'right']
+
+class MenuDropdown extends React.Component {
+
+	state = {
+		open: false
+	}
+
+	toggleOpen = () => this.setState(({ open }) => ({ open: !open }))
+
+	renderIcons = () => positions.map(position => (
+		<DockIcon
+			key={position}
+			active={this.props.position === position}
+			position={position}
+			select={() => this.props.setPosition(position)}
+		/>
+	))
+
+	render() {
+		const { open } = this.state;
+
+		return (
+			<MenuContainer>
+				<MenuButton onClick={this.toggleOpen}>...</MenuButton>
+				{open &&
+					<DropdownContainer>
+						<DropdownItem>
+							<Label>Dock side</Label>
+							{this.renderIcons()}
+						</DropdownItem>
+					</DropdownContainer>
+				}
+			</MenuContainer>
+		)
+	}
+}
+
+MenuDropdown.propTypes = {
+	position: PropTypes.string.isRequired,
+	setPosition: PropTypes.func.isRequired,
+}
+
+export default MenuDropdown;

src/components/MenuDropdown/index.js

@@ -0,0 +1,2 @@
+import MenuDropdown from './MenuDropdown'
+export default MenuDropdown

src/components/MenuDropdown/styles.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+export const MenuContainer = styled.div`
+	position: absolute;
+	top: 0;
+	right: 55px;
+	margin: 3px;
+	z-index: 1;
+	font-family: helvetica;
+	font-size: 14px;
+	color: rgb(33,33,33);
+`
+
+export const MenuButton = styled.button`
+	position: absolute;
+	right: 0;
+	top: 0;
+`
+
+export const DropdownContainer = styled.div`
+	position: absolute;
+	top: 30px;
+	right: 0;
+	width: 250px;
+	background: white;
+	border: 1px solid rgba(0,0,0,.2);
+	box-shadow: 0 5px 10px rgba(0,0,0,.3);
+`
+
+export const DropdownItem = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10px;
+	border-bottom: 1px solid rgb(240,240,240);
+`
+
+export const Label = styled.div`
+	flex-grow: 1;
+`

src/containers/EffectEntry/EffectEntry.js

@@ -109,7 +109,7 @@ export default connect(
     const effect = state.effectsById[effectId]
     return {
       effect,
-      hasChildren: state.effectsByParentId[effectId]
+      hasChildren: !!state.effectsByParentId[effectId]
     }
   }
 )(EffectEntry)

src/containers/EffectList/EffectList.js

@@ -32,7 +32,7 @@ class EffectList extends React.Component {
   }
 
   isCollapsed = effectId => {
-    return this.state.collapsedEffects[effectId]
+    return !!this.state.collapsedEffects[effectId]
   }
 
   collapseEffect = (effectId, collapsed) => {