Implementation to allow right panel's resizing and to go into full-screen mode

src/Model/Editor.coffee

@@ -8,11 +8,15 @@ Storage = require "../Storage/Storage"
 
 module.exports = class Editor
   constructor: ->
+    @_setupLayout()
     @_setupSerializer()
     @_setupProject()
     @_setupRevision()
     @_parseQueryString()
 
+  _setupLayout: ->
+    @layout = new Model.Layout()
+
   _setupProject: ->
     @loadFromLocalStorage()
     if !@project
@@ -158,10 +162,3 @@ module.exports = class Editor
 
   isRedoable: ->
     return @redoStack.length > 0
-
-
-
-
-
-
-

src/Model/Layout.coffee

@@ -0,0 +1,23 @@
+
+module.exports = class Layout
+  constructor: ->  
+    @rightPanelWidth = 400
+    @_rightPanelMin = 100
+    @_rightPanelMax = 600
+    @fullScreen = false
+
+  resizeRightPanel: (xDelta) ->
+    @rightPanelWidth -= xDelta
+    @rightPanelWidth = Math.min(@_rightPanelMax, Math.max(@_rightPanelMin, @rightPanelWidth))
+    @_refreshLayout()
+
+  toggleFullScreen: ->
+    @fullScreen = !@fullScreen
+    @_refreshLayout()
+
+  _refreshLayout: ->
+    # Changing the layout will deform the canvas
+    # This is a workaround by triggering "resize" event so that the Canvas will update itself
+    resize = new Event "resize"
+    window.dispatchEvent resize
+

src/Model/Model.coffee

@@ -9,6 +9,7 @@ module.exports = Model = {}
 # These are *classes*
 Model.Project = require "./Project"
 Model.ParticularElement = require "./ParticularElement"
+Model.Layout = require "./Layout"
 
 # These are *variants of the Node object*
 Model.Node = require "./Node"

src/View/Canvas.coffee

@@ -8,15 +8,24 @@ Util = require "../Util/Util"
 
 R.create "Canvas",
   contextTypes:
+    editor: Model.Editor
     project: Model.Project
     hoverManager: R.HoverManager
     dragManager: R.DragManager
 
   render: ->
+    layout = @context.editor.layout
+
     R.div {
-      className: "Canvas"
-      # style:
-      #   cursor: @_cursor()
+      className: R.cx {
+         Canvas: true
+         FullScreen: layout.fullScreen
+      }
+      style: {
+        # cursor: @_cursor()
+        right: @context.editor.layout.rightPanelWidth
+      }
+
       onMouseDown: @_onMouseDown
       onMouseEnter: @_onMouseEnter
       onMouseLeave: @_onMouseLeave
@@ -27,6 +36,14 @@ R.create "Canvas",
         ref: "HTMLCanvas"
         draw: @_draw
       }
+      R.div {
+        className: R.cx {
+           LayoutMode: true
+           FullScreen: layout.fullScreen
+        }
+        ref: "LayoutMode"
+        onClick: @_toggleLayout
+      }
 
   componentDidMount: ->
     window.addEventListener "resize", @_onResize
@@ -353,7 +370,7 @@ R.create "Canvas",
 
 
   # ===========================================================================
-  # Pan and Zoom
+  # Pan, Zoom and Layout
   # ===========================================================================
 
   _startPan: (mouseDownEvent) ->
@@ -381,6 +398,10 @@ R.create "Canvas",
     matrix = matrix.translate(-x, -y)
     element.viewMatrix = matrix
 
+  _toggleLayout: ->
+    { layout } = @context.editor
+    console.log(layout)
+    layout.toggleFullScreen()
 
   # ===========================================================================
   # Hit Detection

src/View/CreatePanel.coffee

@@ -7,10 +7,18 @@ Util = require "../Util/Util"
 R.create "CreatePanel",
   contextTypes:
     project: Model.Project
+    editor: Model.Editor
 
   render: ->
     project = @context.project
-    R.div {className: "CreatePanel"},
+    layout = @context.editor.layout
+
+    R.div {
+      className: R.cx {
+         CreatePanel: true
+         FullScreen: layout.fullScreen
+      }
+    },
       R.div {className: "Header"}, "Symbols"
       R.div {className: "Scroller"},
         for element in project.createPanelElements

src/View/Editor.coffee

@@ -37,19 +37,12 @@ R.create "Editor",
       R.DragHint {}
 
       R.CreatePanel {}
-      R.Outline {}
-      R.Inspector {}
+      R.RightPanel {}
       R.Menubar {}
       R.Canvas {}
 
 
 
-
-
-
-
-
-
 # This wrapper is used in Expression where we need to be able to render
 # ReactElements within a CodeMirror mark. It may not be needed in the future
 # if React migrates from context coming from owner to context coming from

src/View/Menubar.coffee

@@ -13,7 +13,15 @@ R.create "Menubar",
     {editor, project} = @context
     isSelection = project.selectedParticularElement?
 
-    R.div {className: "Menubar"},
+    R.div {
+        className: R.cx {
+          Menubar: true
+          FullScreen: editor.layout.fullScreen
+        }
+        style: {
+          right: editor.layout.rightPanelWidth
+        }
+      },
       R.MenubarItem {title: "New", isDisabled: false, fn: @_new}
       R.MenubarItem {title: "Load", isDisabled: false, fn: @_load}
       R.MenubarItem {title: "Save", isDisabled: false, fn: @_save}

src/View/R.coffee

@@ -88,6 +88,7 @@ require "./Editor"
 require "./Menubar"
 require "./CreatePanel"
 require "./Canvas"
+require "./RightPanel"
 require "./Outline"
 require "./Inspector"
 require "./AttributeRow"

src/View/RightPanel.coffee

@@ -0,0 +1,44 @@
+R = require "./R"
+Model = require "../Model/Model"
+Util = require "../Util/Util"
+
+
+R.create "RightPanel",
+  contextTypes:
+    editor: Model.Editor
+    dragManager: R.DragManager
+
+  _onResizeMouseDown: (mouseDownEvent) ->
+    startX = mouseDownEvent.clientX
+    layout = @context.editor.layout
+
+    @context.dragManager.start mouseDownEvent,
+      cursor: "ew-resize"
+      onMove: (moveEvent) =>
+        dx = moveEvent.clientX - startX
+        startX = moveEvent.clientX
+        layout.resizeRightPanel(dx)
+
+  componentDidMount: ->
+    @refs.resize.getDOMNode().addEventListener("mousedown", @_onResizeMouseDown)
+
+  render: ->
+    layout = @context.editor.layout
+
+    R.div { 
+        className: R.cx {
+           RightPanel: true
+           FullScreen: layout.fullScreen
+        }
+        style: {
+          width: layout.rightPanelWidth
+        }
+      },
+      R.div { 
+        className: "RightResize"
+        ref: "resize"
+        #onClick: layout.dragRightPanel.bind(layout, 10)
+      }
+      R.Outline {}
+      R.Inspector {}
+

style/index.styl

@@ -24,6 +24,14 @@ defaultFont()
 codeFont()
   font-family menlo, monospace
 
+noSelect()
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
 selectedColor = #09c
 hoveredColor = #0c9
 controlledColor = #c00
@@ -78,9 +86,9 @@ canvas
 // ============================================================================
 
 CreatePanelWidth = 120px
-OutlineWidth = 400px
 InspectorHeight = 50%
 MenubarHeight = 24px
+RightResizeWidth = 10px
 
 .CreatePanel
   box-sizing border-box
@@ -93,21 +101,44 @@ MenubarHeight = 24px
   background-color #eee
   border-right 1px solid #ccc
 
+  &.FullScreen
+    display none
+
+.RightPanel
+  box-sizing border-box
+  position absolute
+  right 0
+  top 0
+  bottom 0
+
+  &.FullScreen
+    display none
+
+.RightResize
+  position absolute
+  width RightResizeWidth
+  background #eee
+  left 0
+  height 100%
+  border-left 1px solid #ccc
+
 .Outline
+  noSelect()
   box-sizing border-box
   position absolute
   top 0
   right 0
   bottom InspectorHeight
-  width OutlineWidth
+  width "calc(100% - %s)" % RightResizeWidth
   background-color #fff
   border-left 1px solid #ccc
 
 .Inspector
+  noSelect()
   box-sizing border-box
   position absolute
   right 0
-  width OutlineWidth
+  width "calc(100% - %s)" % RightResizeWidth
   bottom 0
   height InspectorHeight
   background-color #fff
@@ -118,19 +149,40 @@ MenubarHeight = 24px
   position absolute
   left CreatePanelWidth
   top MenubarHeight
-  right OutlineWidth
   bottom 0
 
+  &.FullScreen
+    position fixed
+    left 0 
+    top 0
+    bottom 0
+    right 0 !important
+
+.LayoutMode
+  noSelect()
+  position absolute
+  border 1px solid #ccc
+  width 20px
+  height 20px
+  right 3px
+  top -22px
+  box-sizing border-box
+  background-color #eee
+
+  &.FullScreen
+    top 2px
+
 .Menubar
   box-sizing border-box
   position absolute
   height MenubarHeight
   left CreatePanelWidth
-  right OutlineWidth
   background-color #eee
   top 0
   border-bottom 1px #ccc solid
 
+  &.FullScreen
+    display none
 
 // ============================================================================
 // Layout "Chrome"