Deal with interactive html added and pointer events

extras/CactusFramer/static/app.coffee

@@ -1,92 +1,7 @@
-getTime = Date.now
-
-if performance.now
-	getTime = -> performance.now()
-
-# class Timer
-# 	constructor: -> @start()
-# 	start: -> @_startTime = getTime()
-# 	stop:  -> getTime() - @_startTime
-
-class FPSTimer
-
-	constructor: -> @start()
-
-	start: ->
-		@_frameCount = 0
-		@_startTime = getTime()
-
-		Framer.Loop.on("render", @_tick)
-
-	stop: ->
-
-		time = getTime() - @_startTime
-
-		Framer.Loop.off("render", @_tick)
-
-		results =
-			time: time
-			frames: @_frameCount
-			fps: 1000 / (time / @_frameCount)
-
-		return results
-
-	_tick: =>
-		@_frameCount++
-
-run = (options, callback) ->
-	
-	context = new Framer.Context(name:"TestRun")
-	context.run -> _run options, (results) ->
-		context.reset()
-		callback(results)
-
-_run = (options, callback) ->
-
-	startTime = getTime()
-	results = {}
-
-	LAYERS = for i in [1..options.n]
-
-		layerC = new Layer 
-			x: Math.random() * window.innerWidth, 
-			y: Math.random() * window.innerHeight
-	
-	results.layers = Framer.CurrentContext._layerList.length
-	results.buildTotal = getTime() - startTime
-	results.buildLayer = results.buildTotal / results.layers
-
-	t1 = new FPSTimer
-
-	for layer in LAYERS
-		
-		layer.animate
-			properties:
-				x: Math.random() * window.innerWidth, 
-				y: Math.random() * window.innerHeight
-			curve: "spring(1000, 10, 0)"
-
-	layer.on Events.AnimationEnd, ->
-		results.fps = t1.stop()
-		callback(results)
-
-Utils.domComplete ->
-
-	c = 0
-
-	callback = (results) ->
-
-		if results
-			print "#{c} - #{results.layers}
-				Build: #{Utils.round(results.buildTotal, 0)}ms/#{Utils.round(results.buildLayer, 2)}ms
-				FPS: #{Utils.round(results.fps.fps, 1)}"
-
-		if c < 100
-			c++
-			run {n: c * 20}, callback
-
-	callback()
-
+layer = new Layer
 
+print layer.ignoreEvents
 
+layer.html = "<input type='text'>"
 
+print layer.ignoreEvents

framer/Config.coffee

@@ -22,6 +22,14 @@ FramerCSS = """
 	-webkit-user-select: none;
 }
 
+.framerLayer input,
+.framerLayer textarea,
+.framerLayer select,
+.framerLayer option
+{
+	pointer-events: auto;
+}
+
 """
 
 Utils.domComplete -> Utils.insertCSS(FramerCSS)

framer/Layer.coffee

@@ -342,10 +342,10 @@ class exports.Layer extends BaseClass
 			# If the contents contains something else than plain text
 			# then we turn off ignoreEvents so buttons etc will work.
 
-			if not (
-				@_elementHTML.childNodes.length == 1 and
-				@_elementHTML.childNodes[0].nodeName == "#text")
-				@ignoreEvents = false
+			# if not (
+			# 	@_elementHTML.childNodes.length == 1 and
+			# 	@_elementHTML.childNodes[0].nodeName == "#text")
+			# 	@ignoreEvents = false
 
 			@emit "change:html"
 

test/tests/LayerTest.coffee

@@ -665,14 +665,25 @@ describe "Layer", ->
 			layer._elementHTML.innerHTML.should.equal "Hello"
 			layer.ignoreEvents.should.equal true
 
-		it "should set other html", ->
+
+		it "should set interactive html and allow pointer events", ->
+
+			tags = ["input", "select", "textarea", "option"]
+
+			html = ""
+
+			for tag in tags
+				html += "<#{tag}></#{tag}>"
 
 			layer = new Layer
-			layer.html = "<input type=\"button\">"
+			layer.html = html
+
+			for tag in tags
+				element = layer.querySelectorAll(tag)[0]
+				style = window.getComputedStyle(element)
+				style["pointer-events"].should.equal "auto"
+				# style["-webkit-user-select"].should.equal "auto"
 
-			layer._element.childNodes[0].should.equal layer._elementHTML
-			layer._elementHTML.innerHTML.should.equal "<input type=\"button\">"
-			layer.ignoreEvents.should.equal false
 
 		it "should work with querySelectorAll", ->