Creating a triangle via Framer Layer

triangle.coffee

# Project Info
# This info is presented in a widget when you share.
# http://framerjs.com/docs/#info.info

Framer.Info =
	title: "Triangle Layer Rebound"
	author: "Jordan Dobson"
	twitter: "jordandobson"
	description: "[email protected]\n\nThis rebound of jrdn.io/haJ2 \nby Black Ray adds direction checking, allows you to set direction as an option when creating a layer and sets the bounding box of the layer to it's intrinsic size."


# Attempt to define triangle on Layer if it hasn't been set yet	
try Layer.define "triangle",
	get: -> @_properties["triangle"]
	set: (direction) -> 
		edge = top: "top", bottom: "bottom", left: "left", right: "right"
		return print 'Please use a valid argument for triangle "top", "bottom", "left" or "right"' unless edge[direction]?
		oppositeEdge = (opposite) ->
			return switch opposite
				when edge.left   then edge.right
				when edge.right  then edge.left
				when edge.top    then edge.bottom
				when edge.bottom then edge.top
		@.borderColor = @.backgroundColor = ""
		@.borderWidth = @.height = @.width  / 2 if direction is edge.top  or direction is edge.bottom
		@.borderWidth = @.width  = @.height / 2 if direction is edge.left or direction is edge.right
		@.style = 
			"border-#{direction}-color" : @.color
			"border-#{oppositeEdge direction }": "none"
		@_properties["triangle"] = direction

# Create triangles
triangleLeft   = new Layer size: 100, color: "#3D1C00", triangle: "left"
triangleTop    = new Layer size: 100, color: "#86B8B1", triangle: "top"
triangleBottom = new Layer size: 100, color: "#FA2A00", triangle: "bottom"
triangleRight  = new Layer size: 100, color: "#F2D694", triangle: "right"

# Position the triangles
for t in [triangleLeft, triangleRight, triangleTop, triangleBottom]
	t.point = Align.center
	t.x -= t.width/2  if t is triangleLeft
	t.x += t.width/2  if t is triangleRight
	t.y -= t.height/2 if t is triangleTop
	t.y += t.height/2 if t is triangleBottom
	# t.shadowSpread = 1 # enable this to see the bounding box
	print t.triangle