Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Make layer.screenFrame a property
You can now directly get/set the screenFrame for each layer (layer.screenFrame used to be a function). I also got rid of the Frame object in many places in favor of a normal object.
  • Loading branch information
koenbok committed Aug 19, 2014
1 parent 689cbb4 commit f13bd7f
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 54 deletions.
24 changes: 15 additions & 9 deletions extras/CactusFramer/static/app.coffee
@@ -1,17 +1,23 @@
layerA = new Layer x:100, y:100, width:100, height:100
layerA.clip = false
layerB = new Layer x:300, y:300, width:100, height:100, backgroundColor:"red", superLayer:layerA

# assert.equal layerB.screenFrame.x, 400
# assert.equal layerB.screenFrame.y, 400

# print _.pick(layerA, ["x", "y", "width", "height"])

newFrame = Utils.convertPoint({x:200, y:200}, null, layerA)

print newFrame

layerA = new Layer
width: 100
height: 100
layerB.frame = newFrame

layerB = new Layer
width: 20
height: 20
superLayer: layerA
print layerB.x

layerB.draggable.enabled = true
layerB.draggable.maxDragFrame = layerA.frame
layerB.superLayer = null



# assert.equal layerB.screenFrame.x, 1000
# assert.equal layerB.screenFrame.y, 1000
81 changes: 45 additions & 36 deletions framer/Layer.coffee
Expand Up @@ -42,14 +42,6 @@ layerStyleProperty = (cssProperty) ->
@style[cssProperty] = value
@emit "change:#{cssProperty}", value

frameProperty = (name) ->
exportable: false
get: -> @frame[name]
set: (value) ->
frame = @frame
frame[name] = value
@frame = frame

class exports.Layer extends BaseClass

constructor: (options={}) ->
Expand All @@ -64,6 +56,9 @@ class exports.Layer extends BaseClass
@_createElement()
@_setDefaultCSS()

if options.hasOwnProperty "frame"
options = _.extend(options, options.frame)

options = Defaults.getDefaults "Layer", options

super options
Expand All @@ -74,13 +69,9 @@ class exports.Layer extends BaseClass
# We need to explicitly set the element id again, becuase it was made by the super
@_element.id = "FramerLayer-#{@id}"

# Extract the frame from the options, so we support minX, maxX etc.
if options.hasOwnProperty "frame"
frame = new Frame options.frame
else
frame = new Frame options

@frame = frame
for k in ["minX", "midX", "maxX", "minY", "midY", "maxY"]
if options.hasOwnProperty k
@[k] = options[k]

# Insert the layer into the dom or the superLayer element
if not options.superLayer
Expand Down Expand Up @@ -190,47 +181,65 @@ class exports.Layer extends BaseClass
# Geometry

@define "frame",
get: ->
new Frame @
get: -> _.pick(@, ["x", "y", "width", "height"])
set: (frame) ->
return if not frame
for k in ["x", "y", "width", "height"]
@[k] = frame[k]
if frame.hasOwnProperty(k)
@[k] = frame[k]

@define "minX",
get: -> @x
set: (value) -> @x = value

@define "midX",
get: -> Utils.frameGetMidX @
set: (value) -> Utils.frameSetMidX @, value

@define "minX", frameProperty "minX"
@define "midX", frameProperty "midX"
@define "maxX", frameProperty "maxX"
@define "minY", frameProperty "minY"
@define "midY", frameProperty "midY"
@define "maxY", frameProperty "maxY"
@define "maxX",
get: -> Utils.frameGetMaxX @
set: (value) -> Utils.frameSetMaxX @, value

@define "minY",
get: -> @y
set: (value) -> @y = value

@define "midY",
get: -> Utils.frameGetMidY @
set: (value) -> Utils.frameSetMidY @, value

@define "maxY",
get: -> Utils.frameGetMaxY @
set: (value) -> Utils.frameSetMaxY @, value

convertPoint: (point) ->
# Convert a point on screen to this views coordinate system
# TODO: needs tests
Utils.convertPoint point, null, @

screenFrame: ->
# Get this views absolute frame on the screen
# TODO: needs tests
Utils.convertPoint @frame, @, null
@define "screenFrame",
get: ->
Utils.convertPoint(@frame, @, null)
set: (frame) ->
if not @superLayer
@frame = frame
else
@frame = Utils.convertPoint(frame, null, @superLayer)

contentFrame: ->
Utils.frameMerge @subLayers.map (layer) -> layer.frame.properties
Utils.frameMerge(_.pluck(@subLayers, "frame"))

centerFrame: ->
# Get the centered frame for its superLayer
# We always make these pixel perfect
# TODO: needs tests
if @superLayer
frame = @frame
frame.midX = parseInt @superLayer.width / 2.0
frame.midY = parseInt @superLayer.height / 2.0
Utils.frameSetMidX(frame, parseInt(@superLayer.width / 2.0))
Utils.frameSetMidY(frame, parseInt(@superLayer.height / 2.0))
return frame

else
frame = @frame
frame.midX = parseInt window.innerWidth / 2.0
frame.midY = parseInt window.innerHeight / 2.0
Utils.frameSetMidX(frame, parseInt(window.innerWidth / 2.0))
Utils.frameSetMidY(frame, parseInt(window.innerHeight / 2.0))
return frame

center: ->
Expand Down
5 changes: 1 addition & 4 deletions framer/Utils.coffee
Expand Up @@ -483,10 +483,7 @@ Utils.convertPoint = (input, layerA, layerB) ->

# Convert a point between two layer coordinate systems

point = {}

for k in ["x", "y", "width", "height"]
point[k] = input[k]
point = _.defaults(input, {x:0, y:0})

superLayersA = layerA?.superLayers() or []
superLayersB = layerB?.superLayers() or []
Expand Down
11 changes: 6 additions & 5 deletions test/tests/ImporterTest.coffee
Expand Up @@ -13,17 +13,18 @@ describe "ExternalDocument", ->

for layerName, layer of layers
dataB[layerName] =
frame: layer.frame.properties
frame: layer.frame
superLayerName: layer.superLayer?.layerName
subLayerNames: layer.subLayers.map (l) -> l.name

jsonA = JSON.stringify dataA, null, "\t"
jsonB = JSON.stringify dataB, null, "\t"

# Uncomment this to see current dump
# console.log ""
# console.log "Name: #{name}"
# console.log jsonB
if jsonA != jsonB
# Uncomment this to see current dump
console.log ""
console.log "Name: #{name}"
console.log jsonB

assert.equal jsonA, jsonB

Expand Down
19 changes: 19 additions & 0 deletions test/tests/LayerTest.coffee
Expand Up @@ -575,6 +575,25 @@ describe "Layer", ->
layer.maxY = 200
layer.y.should.equal 100

it "should get and set screenFrame", ->
layerA = new Layer x:100, y:100, width:100, height:100
layerB = new Layer x:300, y:300, width:100, height:100, superLayer:layerA

assert.equal layerB.screenFrame.x, 400
assert.equal layerB.screenFrame.y, 400

layerB.screenFrame = {x:1000, y:1000}

assert.equal layerB.screenFrame.x, 1000
assert.equal layerB.screenFrame.y, 1000

assert.equal layerB.x, 900
assert.equal layerB.y, 900

layerB.superLayer = null
assert.equal layerB.screenFrame.x, 900
assert.equal layerB.screenFrame.y, 900

describe "Center", ->

it "should center", ->
Expand Down

0 comments on commit f13bd7f

Please sign in to comment.