Skip to content

Commit

Permalink
Remove react
Browse files Browse the repository at this point in the history
  • Loading branch information
@koenbok
koenbok committed Sep 25, 2014
1 parent fce1baa commit e5ce332
Show file tree
Hide file tree
Showing 8 changed files with 130 additions and 351 deletions.
2 changes: 1 addition & 1 deletion Makefile
View file
Expand Up @@ -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
Expand Down
170 changes: 14 additions & 156 deletions extras/CactusFramer/static/app.coffee
View file
@@ -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)"


30 changes: 17 additions & 13 deletions framer/AnimationLoop.coffee
View file
Expand Up @@ -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)
103 changes: 5 additions & 98 deletions framer/Context.coffee
View file
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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

Expand Down
8 changes: 4 additions & 4 deletions framer/Framer.coffee
View file
Expand Up @@ -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"

Expand Down

0 comments on commit e5ce332

Please sign in to comment.