Permalink
Browse files

Remove react

  • Loading branch information...
koenbok committed Sep 25, 2014
1 parent fce1baa commit e5ce332acba6fe2436c33c7f2b48c95559671a11
@@ -11,7 +11,7 @@ build:
make clean
mkdir -p build
# $(coffee) scripts/banner.coffee > build/framer.debug.js
cat vendor/react.min.js >> build/framer.debug.js
# cat vendor/react.min.js >> build/framer.debug.js
$(browserify) framer/Framer.coffee >> build/framer.debug.js
cat build/framer.debug.js | $(bin)/exorcist build/framer.js.map > build/framer.js
# Build the minimized version
@@ -1,165 +1,23 @@
reactEventMap =
"mouseup": "onMouseUp"
"click": "onClick"
"mouseover": "onMouseOver"
# onDrag onDragEnd
# onDragEnter
# onDragExit
# onDragLeave
# onDragOver
# onDragStart
# onDrop
# onMouseDown
# onMouseEnter
# onMouseLeave
# onMouseMove
# onMouseOut
# onMouseOver
# onMouseUp
main = ->
layerA = new Layer
layerA.backgroundColor = "red"
layerA.borderRadius = 10
LAYERS = for i in [1..200]
# layerB = new Layer x:300
# layerC = new Layer superLayer:layerB, x:10
# layerC.backgroundColor = "Red"
# layerC.image = "https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10525814_10204137411226418_7683209453049109891_n.jpg?oh=dcc7c9b58113dc478a780a84e7c1ffce&oe=5485F5B6&__gda__=1422635977_045b7d67949ebb950ad970187dfb6113"
# layerA = new Layer
# layerB = new Layer x:300
# layerB.on Events.Click, ->
# @animate
# properties: x:500
# console.log layerB._events
# # console.log layerA._style
# for i in [1..50]
# layerC = new Layer
# x: Math.random() * window.innerWidth,
# y: Math.random() * window.innerHeight
# layerC.on Events.MouseOver, ->
# @animate
# properties:
# x: Math.random() * window.innerWidth,
# y: Math.random() * window.innerHeight
# curve: "spring(5,1, 0)"
pointOnCircle = (cx, cy, r, a) ->
point =
x: cx + r * Math.sin(a)
y: cy + r * Math.cos(a)
radians = (degrees) -> degrees * (Math.PI / 180)
degrees = (radians) -> radians * (180 / Math.PI)
circle = new Layer width:200, height:200
circle.borderRadius = circle.height
circle.backgroundColor = "rgba(255, 100, 100, 0.1)"
circle.center()
n = 20
for i in [1..n]
layer = new Layer midX:circle.midX, midY:circle.midY, width:50, height:50
layer.borderRadius = layer.height
layerC = new Layer
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight
point = pointOnCircle circle.midX, circle.midY, circle.width/2, radians(360.0 / n * i)
layer.animate
properties:
x: point.x - layer.width / 2.0
y: point.y - layer.height / 2.0
curve: "spring(100,20,-)"
delay: 0.05 * i
main()
# eventMap =
# Events.Click: "onClick"
# reactElementList = (layers) ->
# _.map(layers, (layer) -> layer._reactElement())
# clicker = (e) -> console.log "click", e
# Layer::_reactElement = ->
# options =
# className: "framerLayer"
# style: @_style
# # todo: make this work on the moment you add an event
# for eventName in _.keys(@_events)
# if reactEventMap.hasOwnProperty(eventName)
# options[reactEventMap[eventName]] = (e) => @emit(eventName, e)
# React.DOM.div(options, null, reactElementList(@subLayers)...)
# FramerApplication = React.createClass
# render: ->
# # Todo: cache the root layers
# rootLayers = _.filter(Framer.CurrentContext._layerList, (layer) -> !layer.superLayer)
Utils.interval .3, ->
# React.DOM.div({style:Framer.Config.rootBaseCSS}, null, reactElementList(rootLayers)...)
# start = new Date().getTime()
# contentNode = document.createElement("div")
# css = """
# body {
# overflow: hidden;
# pointer-events: none
# }
# .framerLayer {
# display: block;
# position: absolute;
# background-repeat: no-repeat;
# background-size: cover;
# -webkit-overflow-scrolling: touch;
# -webkit-box-sizing: border-box;
# -webkit-user-select: none;
# }
# """
# Utils.domComplete ->
# Utils.insertCSS(css)
# document.body.appendChild(contentNode)
# main()
# Framer.Loop.on "render", ->
# React.renderComponent(FramerApplication(), contentNode)
layer = _.shuffle(LAYERS)[0];
layer.animate
properties:
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight
# rotationX: Math.random() * 180
# rotationY: Math.random() * 180
curve: "spring(5,1, 0)"
@@ -7,23 +7,27 @@ Utils = require "./Utils"
class exports.AnimationLoop extends EventEmitter
start: ->
window.requestAnimationFrame(@tick)
start: =>
animationLoop = @
tick: (timestamp) =>
_timestamp = null
@start()
# if @_timestamp
# delta = (timestamp - @_timestamp) / 1000
# else
# delta = 1/60
tick = (timestamp) ->
delta = 1/60
window.requestAnimationFrame(tick)
# console.log "tick", @_events?.update?.length
# if _timestamp
# delta = (timestamp - _timestamp) / 1000
# else
# delta = 1/60
@emit("update", delta)
@emit("render", delta)
delta = 1/60
@_timestamp = timestamp
animationLoop.emit("update", delta)
animationLoop.emit("render", delta)
_timestamp = timestamp
window.requestAnimationFrame(tick)
@@ -4,69 +4,6 @@ Utils = require "./Utils"
{Config} = require "./Config"
{EventManager} = require "./EventManager"
#React = require "React"
# onTouchCancel onTouchEnd onTouchMove onTouchStart
reactEventMap =
"mouseup": "onMouseUp"
"click": "onClick"
"mouseover": "onMouseOver"
"touchcancel": "onTouchCancel"
"touchend": "onTouchEnd"
"touchmove": "onTouchMove"
"touchstart": "onTouchStart"
# onDrag onDragEnd
# onDragEnter
# onDragExit
# onDragLeave
# onDragOver
# onDragStart
# onDrop
# onMouseDown
# onMouseEnter
# onMouseLeave
# onMouseMove
# onMouseOut
# onMouseOver
# onMouseUp
reactElement = (layer) ->
if !layer._reactElement or layer._needsRender is true
options =
className: "framerLayer"
style: layer._style
# todo: make this work on the moment you add an event
for eventName in _.keys(layer._events)
if reactEventMap.hasOwnProperty(eventName)
options[reactEventMap[eventName]] = (e) => layer.emit(eventName, e)
layer._reactElement = React.DOM.div(options, null, reactElementList(layer.subLayers)...)
layer._needsRender = false
return layer._reactElement
reactElementList = (layers) -> _.map(layers, reactElement)
# ReactRAFBatchingStrategy =
# isBatchingUpdates: true
# batchedUpdates: (callback, param) -> callback(param)
# # var ReactRAFBatchingStrategy = require('./ReactRAFBatchingStrategy');
# ReactUpdates = require('react/lib/ReactUpdates')
# ReactUpdates.injection.injectBatchingStrategy(ReactRAFBatchingStrategy);
Counter = 1
class exports.Context
@@ -93,33 +30,15 @@ class exports.Context
@eventManager?.reset()
@eventManager = new EventManager
# @_rootElement?.parentNode?.removeChild?(@_rootElement)
if not @_rootElement
@_rootElement = @_createRootElement()
@_rootElement?.parentNode?.removeChild?(@_rootElement)
@_rootElement = @_createRootElement()
@_delayTimers?.map (timer) -> window.clearTimeout(timer)
@_delayIntervals?.map (timer) -> window.clearInterval(timer)
@_layerList = []
@_delayTimers = []
@_delayIntervals = []
@_needsRender = true
@_count = 0
@_reactApplication = React.createClass
render: =>
# Todo: cache the root layers
rootLayers = _.filter(@_layerList, (layer) -> !layer.superLayer)
React.DOM.div({className: "framerContext"}, "render: #{@_count}", reactElementList(rootLayers)...)
# Utils.domComplete ->
# Utils.insertCSS(css)
# document.body.appendChild(contentNode)
# main()
# Framer.Loop.on "render", ->
# React.renderComponent(FramerApplication(), contentNode)
@_delayIntervals = []
getRootElement: ->
@_rootElement
@@ -131,27 +50,15 @@ class exports.Context
element = document.createElement("div")
element.id = "FramerContextRoot-#{@_name}"
element.classList.add("framerContext")
# _.extend element.style, Config.rootBaseCSS
parentElement = @_parentLayer?._element
# Utils.domComplete -> Utils.delay 0, ->
Utils.domComplete =>
Framer.Loop.once "render", ->
parentElement ?= document.body
parentElement.appendChild(element)
Framer.Loop.on "render", =>
if @_needsRender is true
@_count++
console.log "render: #{@_count}"
React.renderComponent(@_reactApplication(), element)
@_needsRender = false
# Framer.Loop.on "render", =>
# React.renderComponent(@_reactApplication(), element)
# ReactUpdates.flushBatchedUpdates();
element
@@ -32,14 +32,14 @@ Framer.DeviceView = (require "./DeviceView").DeviceView
Framer.Debug = (require "./Debug").Debug
Framer.Extras = require "./Extras/Extras"
Framer.DefaultContext = new Framer.Context(name:"Default")
Framer.CurrentContext = Framer.DefaultContext
Framer.Loop = new Framer.AnimationLoop()
Framer.Loop.tick()
Utils.domComplete Framer.Loop.start
window.Framer = Framer if window
Framer.DefaultContext = new Framer.Context(name:"Default")
Framer.CurrentContext = Framer.DefaultContext
# Compatibility for Framer 2
require "./Compat"
Oops, something went wrong.

0 comments on commit e5ce332

Please sign in to comment.