Remove react

Makefile

@@ -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

extras/CactusFramer/static/app.coffee

@@ -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)"

framer/AnimationLoop.coffee

@@ -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)

framer/Context.coffee

@@ -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

framer/Framer.coffee

@@ -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"