Skip to content
Permalink
Browse files

Merge pull request #266 from koenbok/feature/originZ

Improving 3D, fixing translateZ issues
  • Loading branch information...
koenbok committed Dec 27, 2015
2 parents 31baf97 + b4922f6 commit 1f0def71611f359ae46abe7eebfee9bec1ad94ed
@@ -3,7 +3,7 @@
"sharedPrototype" : 1,
"deviceOrientation" : 0,
"contentScale" : 1,
"deviceType" : "ipad-mini-silver",
"deviceType" : "iphone-6-silver",
"updateDelay" : 0.3,
"deviceScale" : -1,
"delay" : 0.3
@@ -2,9 +2,9 @@


if (typeof(DeviceComponent) !== "undefined") {DeviceComponent.Devices["iphone-6-silver"].deviceImageJP2 = false};
window.Framer.Defaults.DeviceView = {"deviceScale":-1,"deviceType":"fullscreen","contentScale":1,"orientation":0};
window.Framer.Defaults.DeviceView = {"deviceScale":-1,"deviceType":"iphone-6-silver","contentScale":1,"orientation":0};

window.Framer.Defaults.DeviceComponent = {"deviceScale":-1,"deviceType":"fullscreen","contentScale":1,"orientation":0};
window.Framer.Defaults.DeviceComponent = {"deviceScale":-1,"deviceType":"iphone-6-silver","contentScale":1,"orientation":0};

window.FramerStudioInfo = {"deviceImagesUrl":"\/_server\/resources\/DeviceImages","documentTitle":"Perf.framer"};

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -1,8 +1,11 @@
{_} = require "./Underscore"

Utils = require "./Utils"
{BaseClass} = require "./BaseClass"

{Config} = require "./Config"
{Defaults} = require "./Defaults"

{BaseClass} = require "./BaseClass"
{DOMEventManager} = require "./DOMEventManager"

###
@@ -37,19 +40,21 @@ class exports.Context extends BaseClass
get: -> @_element

constructor: (options={}) ->

super

options = _.defaults options,
parent: null
name: null
options = Defaults.getDefaults("Context", options)

super

if not options.name
throw Error("Contexts need a name")

@_parent = options.parent
@_name = options.name

@perspective = options.perspective
@perspectiveOriginX = options.perspectiveOriginX
@perspectiveOriginY = options.perspectiveOriginY

@reset()

reset: ->
@@ -211,6 +216,7 @@ class exports.Context extends BaseClass
@_element = document.createElement("div")
@_element.id = "FramerContextRoot-#{@_name}"
@_element.classList.add("framerContext")
@_element.style["webkitPerspective"] = @perspective

@__pendingElementAppend = =>
parentElement = @_parent?._element
@@ -254,3 +260,39 @@ class exports.Context extends BaseClass
@define "size", get: -> _.pluck(@frame, ["x", "y"])
@define "point", get: -> _.pluck(@frame, ["width", "height"])

@define "backgroundColor",
get: ->
return @_element?.style["backgroundColor"]
set: (value) ->
if Color.isColor(value)
@_element?.style["backgroundColor"] = new Color value.toString()

@define "perspective",
get: ->
return @_perspective
set: (value) ->
if _.isNumber(value)
@_perspective = value
@_element?.style["webkitPerspective"] = @_perspective

_updatePerspective: ->
@_element?.style["webkitPerspectiveOrigin"] = "#{@perspectiveOriginX * 100}% #{@perspectiveOriginY * 100}%"

@define "perspectiveOriginX",
get: ->
return @_perspectiveOriginX if _.isNumber(@_perspectiveOriginX)
return 0.5
set: (value) ->
if _.isNumber(value)
@_perspectiveOriginX = value
@_updatePerspective()

@define "perspectiveOriginY",
get: ->
return @_perspectiveOriginY if _.isNumber(@_perspectiveOriginY)
return .5
set: (value) ->
if _.isNumber(value)
@_perspectiveOriginY = value
@_updatePerspective()

@@ -15,6 +15,12 @@ Originals =
# curve: "spring(400,40,0)" # Or, the Cemre-Curve
curve: "ease"
time: 1
Context:
perspective: 1200
perspectiveOriginX: 0.5
perspectiveOriginY: 0.5
parent: null
name: null
DeviceComponent:
fullScreen: false
padding: 50
@@ -49,13 +49,13 @@ Utils.domComplete(Framer.Loop.start)

window.Framer = Framer if window

Framer.DefaultContext = new Framer.Context(name:"Default")
Framer.CurrentContext = Framer.DefaultContext

# Fix for mobile scrolling
Framer.Extras.MobileScrollFix.enable() if Utils.isMobile()

# Set the defaults
Defaults = (require "./Defaults").Defaults
Defaults.setup()
Framer.resetDefaults = Defaults.reset

Framer.DefaultContext = new Framer.Context(name:"Default")
Framer.CurrentContext = Framer.DefaultContext

# Fix for mobile scrolling
Framer.Extras.MobileScrollFix.enable() if Utils.isMobile()
@@ -42,7 +42,8 @@ layerProperty = (obj, name, cssProperty, fallback, validator, transformer, optio
layerValueTypeError(name, value)

@_properties[name] = value
@_element.style[cssProperty] = LayerStyle[cssProperty](@)
if cssProperty != null
@_element.style[cssProperty] = LayerStyle[cssProperty](@)

set?(@, value)
@emit("change:#{name}", value)
@@ -145,9 +146,11 @@ class exports.Layer extends BaseClass

@define "originX", layerProperty(@, "originX", "webkitTransformOrigin", 0.5, _.isNumber)
@define "originY", layerProperty(@, "originY", "webkitTransformOrigin", 0.5, _.isNumber)
# @define "originZ", layerProperty(@, "originZ", "WebkitTransformOrigin", 0.5
@define "originZ", layerProperty(@, "originZ", null, 0, _.isNumber)

@define "perspective", layerProperty(@, "perspective", "webkitPerspective", 0, _.isNumber)
@define "perspectiveOriginX", layerProperty(@, "perspectiveOriginX", "webkitPerspectiveOrigin", 0.5, _.isNumber)
@define "perspectiveOriginY", layerProperty(@, "perspectiveOriginY", "webkitPerspectiveOrigin", 0.5, _.isNumber)

@define "rotationX", layerProperty(@, "rotationX", "webkitTransform", 0, _.isNumber)
@define "rotationY", layerProperty(@, "rotationY", "webkitTransform", 0, _.isNumber)
@@ -185,6 +188,8 @@ class exports.Layer extends BaseClass
@define "borderWidth", layerProperty(@, "borderWidth", "border", 0, _.isNumber)

@define "force2d", layerProperty(@, "force2d", "webkitTransform", false, _.isBoolean)
@define "flat", layerProperty(@, "flat", "webkitTransformStyle", false, _.isBoolean)
@define "backfaceVisible", layerProperty(@, "backfaceVisible", "webkitBackfaceVisibility", true, _.isBoolean)

##############################################################
# Identity
@@ -40,6 +40,18 @@ exports.LayerStyle =
opacity: (layer) ->
layer._properties.opacity

webkitTransformStyle: (layer) ->
if layer._properties.flat
return "flat"
else
return "preserve-3d"

webkitBackfaceVisibility: (layer) ->
if layer._properties.backfaceVisible
return "visible"
else
return "hidden"

overflow: (layer) ->
if layer._properties.scrollHorizontal is true or layer._properties.scrollVertical is true
return "auto"
@@ -78,7 +90,6 @@ exports.LayerStyle =

return css.join(" ")


webkitTransform: (layer) ->


@@ -91,15 +102,17 @@ exports.LayerStyle =
return exports.LayerStyle.webkitTransformForce2d(layer)

"
translate3d(#{layer._properties.x}px,#{layer._properties.y}px,#{layer._properties.z}px)
translate3d(#{layer._properties.x}px,#{layer._properties.y}px,#{layer._properties.z}px)
scale(#{layer._properties.scale})
scale3d(#{layer._properties.scaleX},#{layer._properties.scaleY},#{layer._properties.scaleZ})
skew(#{layer._properties.skew}deg,#{layer._properties.skew}deg)
skewX(#{layer._properties.skewX}deg)
skewY(#{layer._properties.skewY}deg)
rotateX(#{layer._properties.rotationX}deg)
rotateY(#{layer._properties.rotationY}deg)
rotateZ(#{layer._properties.rotationZ}deg)
skew(#{layer._properties.skew}deg,#{layer._properties.skew}deg)
skewX(#{layer._properties.skewX}deg)
skewY(#{layer._properties.skewY}deg)
translateZ(#{layer._properties.originZ}px)
rotateX(#{layer._properties.rotationX}deg)
rotateY(#{layer._properties.rotationY}deg)
rotateZ(#{layer._properties.rotationZ}deg)
translateZ(#{-layer._properties.originZ}px)
"

webkitTransformForce2d: (layer) ->
@@ -123,12 +136,12 @@ exports.LayerStyle =
webkitTransformOrigin: (layer) ->
"#{layer._properties.originX * 100}% #{layer._properties.originY * 100}%"

# Todo: Origin z is in pixels. I need to read up on this.
# "#{layer._properties.originX * 100}% #{layer._properties.originY * 100}% #{layer._properties.originZ * 100}%"

webkitPerspective: (layer) ->
"#{layer._properties.perspective}"

webkitPerspectiveOrigin: (layer) ->
"#{layer._properties.perspectiveOriginX * 100}% #{layer._properties.perspectiveOriginY * 100}%"

pointerEvents: (layer) ->
if layer._properties.ignoreEvents
return "none"
@@ -7,6 +7,34 @@ class ScreenClass extends BaseClass
@define "size", get: -> {width:@width, height:@height}
@define "frame", get: -> {x:0, y:0, width:@width, height:@height}

@define "backgroundColor",
importable: false
exportable: false
get: -> Framer.CurrentContext.backgroundColor
set: (value) ->
Framer.CurrentContext.backgroundColor = value

@define "perspective",
importable: false
exportable: false
get: -> Framer.CurrentContext.perspective
set: (value) ->
Framer.CurrentContext.perspective = value

@define "perspectiveOriginX",
importable: false
exportable: false
get: -> Framer.CurrentContext.perspectiveOriginX
set: (value) ->
Framer.CurrentContext.perspectiveOriginX = value

@define "perspectiveOriginY",
importable: false
exportable: false
get: -> Framer.CurrentContext.perspectiveOriginY
set: (value) ->
Framer.CurrentContext.perspectiveOriginY = value

# Todo: maybe resize based on parent layer

toInspect: ->
@@ -92,3 +92,4 @@ There are also a set of visual and interactive tests for Framer Studio which you
- [Framer Studio](http://framerjs.com) - Prototyping application for OS X, built on Framer
- [Latest Builds](http://builds.framerjs.com) - Latest builds of Framer.js
- [Framer 3 Changes](https://github.com/koenbok/Framer/wiki/Framer-3-Changes) - What's new in Framer 3

@@ -210,4 +210,25 @@ describe "Context", ->
layer = new Layer
layer.id.should.equal 1
layer = new Layer
layer.id.should.equal 2
layer.id.should.equal 2

describe "Styling", ->

it "should set backgroundColor", ->

context = new Framer.Context(name:"Test")
context.backgroundColor = "red"
color = new Color "red"
colorString = color.toString()
context._element.style["backgroundColor"].should.equal colorString

it "should have a default perspective of 1200", ->

context = new Framer.Context(name:"Test")
context._element.style["webkitPerspective"].should.equal "1200"

it "should allow the perspective to be changed", ->

context = new Framer.Context(name:"Test")
context.perspective = 800
context._element.style["webkitPerspective"].should.equal "800"
Oops, something went wrong.

0 comments on commit 1f0def7

Please sign in to comment.
You can’t perform that action at this time.