Permalink
Browse files

Add GridComponent

  • Loading branch information...
koenbok committed Apr 29, 2016
1 parent 1a6bb08 commit 4cf56116c17565cf6710454ab0836e66a52ea2d1
Showing with 112 additions and 6 deletions.
  1. +109 −0 framer/Components/GridComponent.coffee
  2. +3 −6 framer/Framer.coffee
@@ -0,0 +1,109 @@
Utils = require "../Utils"
{Layer} = require "../Layer"
class exports.GridComponent extends Layer
constructor: (options) ->
defaults =
rows: 3
columns: 3
spacing: 0
backgroundColor: "transparent"
options = _.defaults(options, defaults)
super options
_.extend(@, _.pick(options, _.keys(defaults)))
@define "rows",
get: -> @_rows
set: (value) ->
@_rows = value
@_render()
@define "columns",
get: -> @_columns
set: (value) ->
@_columns = value
@_render()
@define "spacing",
get: -> @_spacing or {horizontal: 0, vertical: 0}
set: (value) ->
if _.isNumber(value)
value = {horizontal: value, vertical: value}
@_spacing = value
@_render()
@define "renderCell",
get: -> @_renderCell or @_defaultRenderCell
set: (f) ->
return if f is @_renderCell
throw Error "GridComponent.renderCell should be a function, not #{typeof(f)}" unless _.isFunction(f)
@_renderCell = f
@render()
@define "cellWidth",
get: -> (@width - (@spacing.horizontal * (@columns - 1))) / @columns
@define "cellHeight",
get: -> (@height - (@spacing.vertical * (@rows - 1))) / @rows
@define "cells",
get: -> _.values(@_cells)
cellX: (row) ->
row * (@cellWidth + @spacing.horizontal)
cellY: (column) ->
column * (@cellHeight + @spacing.vertical)
cellFrame: (column, row) ->
frame =
x: @cellX(column)
y: @cellY(row)
width: @cellWidth
height: @cellHeight
cell: (column, row) ->
@_cells["#{column}:#{row}"]
render: ->
@_render()
# columns and rows
_render: ->
@_reset()
for column in [@columns-1..0]
for row in [@rows-1..0]
frame =
x: @cellX(column)
y: @cellY(row)
width: @cellWidth
height: @cellHeight
cell = new Layer
parent: @
frame: frame
name: "Cell #{column}:#{row}"
@renderCell(cell, row, column)
@_cells["#{column}:#{row}"] = cell
_defaultRenderCell: (cell, column, row) ->
cell.backgroundColor = Utils.randomColor()
Utils.labelLayer(cell, "#{row}:#{column}")
_reset: ->
_.invoke(@cells, "destroy")
@_cells = {}
View
@@ -1,9 +1,5 @@
{_} = require "./Underscore"
# Before we do anything else, we need to patch touch events
if window.ontouchstart is undefined
window.ontouchstart = null
Framer = {}
# Root level modules
@@ -27,9 +23,10 @@ Framer.ScrollComponent = (require "./Components/ScrollComponent").ScrollComponen
Framer.PageComponent = (require "./Components/PageComponent").PageComponent
Framer.SliderComponent = (require "./Components/SliderComponent").SliderComponent
Framer.DeviceComponent = (require "./Components/DeviceComponent").DeviceComponent
Framer.GridComponent = (require "./Components/GridComponent").GridComponent
Framer.DeviceView = Framer.DeviceComponent # Compat
_.extend window, Framer if window
_.extend(window, Framer) if window
# Framer level modules
Framer.Context = (require "./Context").Context
@@ -64,4 +61,4 @@ Framer.DefaultContext.backgroundColor = "white"
Framer.CurrentContext = Framer.DefaultContext
Framer.Extras.MobileScrollFix.enable() if Utils.isMobile()
Framer.Extras.TouchEmulator.enable() if not Utils.isTouch()
Framer.Extras.TouchEmulator.enable() if not Utils.isTouch()

0 comments on commit 4cf5611

Please sign in to comment.