Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 13 commits into from
Nov 10, 2015
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c07e280
Adds the RightPanel view to be the parent of Outline and Inspector.
thachmai Oct 21, 2015
0e97cdf
Adds the click handler to RightResize to change the width of RightPan…
thachmai Oct 22, 2015
197f7a8
Changes the click-to-collapse behavior of the right panel resize bar …
thachmai Oct 24, 2015
dfaae93
Adds the full-screen / edit mode switch.
thachmai Oct 25, 2015
a470410
Adds icons to full-screen / edit button.
thachmai Oct 25, 2015
7c1484f
Refactors RightPanel.coffee to get rid of the ref.
thachmai Oct 25, 2015
fb943ea
Merge branch 'master' of github.com:cdglabs/apparatus into layout-ref…
thachmai Nov 6, 2015
b3fa4cd
Refactors layout css to use flex display.
thachmai Nov 7, 2015
0602d74
Refactors full-screen implementation to prevent rendering of the UI c…
thachmai Nov 8, 2015
e648162
Fixes canvas size in css.
thachmai Nov 8, 2015
0f8a96a
Fixes style for generic canvas.
thachmai Nov 8, 2015
8ea6c22
Fixes createPanel's x icon placement and right panel resize calculation.
thachmai Nov 10, 2015
f5617a9
Adds fullscreen and edit to fontcustom.
thachmai Nov 10, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 36 additions & 6 deletions dist/font/icons-preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,9 @@
[data-icon]:before { content: attr(data-icon); }

[data-icon]:before,
.icon-pencil:before,
.icon-edit:before,
.icon-fullscreen:before,
.icon-pencil:before,
.icon-x:before {
display: inline-block;
font-family: "icons";
Expand All @@ -176,8 +178,10 @@
font-smoothing: antialiased;
}

.icon-pencil:before { content: "\f100"; }
.icon-x:before { content: "\f101"; }
.icon-edit:before { content: "\f100"; }
.icon-fullscreen:before { content: "\f101"; }
.icon-pencil:before { content: "\f102"; }
.icon-x:before { content: "\f103"; }
</style>

<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Expand All @@ -193,11 +197,37 @@
<body class="characters-off">
<div id="page" class="container">
<header>
<h1>icons contains 2 glyphs:</h1>
<h1>icons contains 4 glyphs:</h1>
<a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
</header>


<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-edit" class="icon-edit"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-edit" class="icon-edit"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-edit" class="icon-edit"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-edit" class="icon-edit"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-edit" class="icon-edit"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-edit" class="icon-edit"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-edit" class="icon-edit"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-edit" class="icon-edit"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-edit" class="icon-edit"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-edit" class="icon-edit"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-edit" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
</div>
</div>

<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-fullscreen" class="icon-fullscreen"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-fullscreen" class="icon-fullscreen"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-fullscreen" class="icon-fullscreen"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-fullscreen" class="icon-fullscreen"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-fullscreen" class="icon-fullscreen"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-fullscreen" class="icon-fullscreen"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-fullscreen" class="icon-fullscreen"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-fullscreen" class="icon-fullscreen"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-fullscreen" class="icon-fullscreen"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-fullscreen" class="icon-fullscreen"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-fullscreen" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
</div>
</div>

<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span>
Expand All @@ -207,7 +237,7 @@ <h1>icons contains 2 glyphs:</h1>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-pencil" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
</div>
</div>

Expand All @@ -220,7 +250,7 @@ <h1>icons contains 2 glyphs:</h1>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-x" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
</div>
</div>

Expand Down
8 changes: 6 additions & 2 deletions dist/font/icons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@
[data-icon]:before { content: attr(data-icon); }

[data-icon]:before,
.icon-edit:before,
.icon-fullscreen:before,
.icon-pencil:before,
.icon-x:before {
display: inline-block;
Expand All @@ -39,5 +41,7 @@
font-smoothing: antialiased;
}

.icon-pencil:before { content: "\f100"; }
.icon-x:before { content: "\f101"; }
.icon-edit:before { content: "\f100"; }
.icon-fullscreen:before { content: "\f101"; }
.icon-pencil:before { content: "\f102"; }
.icon-x:before { content: "\f103"; }
Binary file modified dist/font/icons.eot
View file
Open in desktop
Binary file not shown.
18 changes: 11 additions & 7 deletions dist/font/icons.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified dist/font/icons.ttf
View file
Open in desktop
Binary file not shown.
Binary file modified dist/font/icons.woff
View file
Open in desktop
Binary file not shown.
4 changes: 4 additions & 0 deletions icons/edit.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions icons/fullscreen.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 4 additions & 7 deletions src/Model/Editor.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -158,10 +162,3 @@ module.exports = class Editor

isRedoable: ->
return @redoStack.length > 0







23 changes: 23 additions & 0 deletions src/Model/Layout.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@

module.exports = class Layout
constructor: ->
@rightPanelWidth = 400
@fullScreen = false

@_rightPanelMin = 100
@_rightPanelMax = 600

# applies the constraints to the new right panel width
constraintRightPanelWidth: (newWidth) ->
@rightPanelWidth = Math.min(@_rightPanelMax, Math.max(@_rightPanelMin, newWidth))
@_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
1 change: 1 addition & 0 deletions src/Model/Model.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
20 changes: 16 additions & 4 deletions src/View/Canvas.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,16 @@ 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()
onMouseDown: @_onMouseDown
onMouseEnter: @_onMouseEnter
onMouseLeave: @_onMouseLeave
Expand All @@ -27,6 +28,15 @@ R.create "Canvas",
ref: "HTMLCanvas"
draw: @_draw
}
R.div {
className: R.cx {
LayoutMode: true
FullScreen: layout.fullScreen
"icon-fullscreen": !layout.fullScreen
"icon-edit": layout.fullScreen
}
onClick: @_toggleLayout
}

componentDidMount: ->
window.addEventListener "resize", @_onResize
Expand Down Expand Up @@ -202,7 +212,6 @@ R.create "Canvas",
@refs.HTMLCanvas.resize()
@_rectCached = null


# ===========================================================================
# Hover and Selection
# ===========================================================================
Expand Down Expand Up @@ -353,7 +362,7 @@ R.create "Canvas",


# ===========================================================================
# Pan and Zoom
# Pan, Zoom and Layout
# ===========================================================================

_startPan: (mouseDownEvent) ->
Expand Down Expand Up @@ -381,6 +390,9 @@ R.create "Canvas",
matrix = matrix.translate(-x, -y)
element.viewMatrix = matrix

_toggleLayout: ->
{ layout } = @context.editor
layout.toggleFullScreen()

# ===========================================================================
# Hit Detection
Expand Down
29 changes: 18 additions & 11 deletions src/View/CreatePanel.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,27 @@ Util = require "../Util/Util"
R.create "CreatePanel",
contextTypes:
project: Model.Project
editor: Model.Editor

render: ->
project = @context.project
R.div {className: "CreatePanel"},
R.div {className: "Header"}, "Symbols"
R.div {className: "Scroller"},
for element in project.createPanelElements
R.CreatePanelItem {element, key: Util.getId(element)}

R.div {className: "CreatePanelAddItem"},
R.button {
className: "AddButton",
onClick: @_createNewElement
}
layout = @context.editor.layout

if layout.fullScreen
return null

R.div { className: "CreatePanel" },
R.div { className: "CreatePanelContainer" },
R.div {className: "Header"}, "Symbols"
R.div {className: "Scroller"},
for element in project.createPanelElements
R.CreatePanelItem {element, key: Util.getId(element)}

R.div {className: "CreatePanelAddItem"},
R.button {
className: "AddButton",
onClick: @_createNewElement
}

_createNewElement: ->
project = @context.project
Expand Down
28 changes: 10 additions & 18 deletions src/View/Editor.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,29 +26,21 @@ R.create "Editor",
}

render: ->
layout = @props.editor.layout
cursor = @_dragManager.drag?.cursor

R.div {
className: R.cx {
CursorOverride: cursor?
}
style: {cursor: cursor ? ""}
className: R.cx {
Editor: true
CursorOverride: cursor?
}
style: {cursor: cursor ? ""}
},
R.DragHint {}

R.CreatePanel {}
R.Outline {}
R.Inspector {}
R.Menubar {}
R.Canvas {}








R.div { className: "Center" },
R.Menubar {}
R.Canvas {}
R.RightPanel {}

# 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
Expand Down
5 changes: 4 additions & 1 deletion src/View/Menubar.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ R.create "Menubar",
{editor, project} = @context
isSelection = project.selectedParticularElement?

R.div {className: "Menubar"},
if editor.layout.fullScreen
return null

R.div { className: "Menubar" },
R.MenubarItem {title: "New", isDisabled: false, fn: @_new}
R.MenubarItem {title: "Load", isDisabled: false, fn: @_load}
R.MenubarItem {title: "Save", isDisabled: false, fn: @_save}
Expand Down
1 change: 1 addition & 0 deletions src/View/R.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ require "./Editor"
require "./Menubar"
require "./CreatePanel"
require "./Canvas"
require "./RightPanel"
require "./Outline"
require "./Inspector"
require "./AttributeRow"
Expand Down
Loading