Permalink
Browse files

Fixed debug view

  • Loading branch information...
koenbok committed Sep 30, 2014
1 parent de60b1b commit e9c3c4ad39d02e7ea2b16729ba4295c1f9da0430
Showing with 25 additions and 31 deletions.
  1. +6 −0 framer/Config.coffee
  2. +19 −31 framer/Debug.coffee
@@ -35,6 +35,12 @@ body {
-webkit-user-select: auto;
}
.framerDebug {
padding: 6px;
color: #fff;
font: 10px/1em Monaco;
}
"""
Utils.domComplete -> Utils.insertCSS(FramerCSS)
@@ -5,43 +5,31 @@ Utils = require "./Utils"
###############################################################
# Debug overview
_debugContext = null
createDebugLayer = (layer) ->
overLayer = new Layer
frame: layer.screenFrame
backgroundColor: "rgba(50,150,200,.35)"
overLayer.style =
textAlign: "center"
color: "white"
font: "10px/1em Monaco"
lineHeight: "#{overLayer.height + 1}px"
boxShadow: "inset 0 0 0 1px rgba(255,255,255,.5)"
overLayer.html = layer.name or layer.id
overLayer.on Events.Click, (event, layer) ->
layer.scale = 0.8
layer.animate
properties: {scale:1}
curve: "spring(1000,10,0)"
overLayer
_debugStyle =
border: "1px solid rgba(50,150,200,.35)"
backgroundColor: "rgba(50,150,200,.35)"
showDebug = ->
_debugContext ?= new Context(name:"Debug")
layerList = window.Framer.DefaultContext.getLayers()
_debugContext.run ->
layerList.map createDebugLayer
for layer in Framer.CurrentContext.getLayers()
layer._debugStyle = _.pick(layer.style, _.keys(_debugStyle))
layer.style = _debugStyle
layer._debugElement = document.createElement("div")
layer._debugElement.innerHTML = layer.name or layer.id
layer._debugElement.classList.add("framerDebug")
layer._element.appendChild(layer._debugElement)
hideDebug = ->
_debugContext.reset()
for layer in Framer.CurrentContext.getLayers()
layer.style = layer._debugStyle
layer._debugElement.parentElement.removeChild(layer._debugElement)
layer._debugElement = null
toggleDebug = Utils.toggle showDebug, hideDebug
toggleDebug = Utils.toggle(showDebug, hideDebug)
EventKeys =
Shift: 16

0 comments on commit e9c3c4a

Please sign in to comment.