summaryrefslogtreecommitdiff
path: root/assets/javascripts/mx/primitives/mx.boxDimensions.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/javascripts/mx/primitives/mx.boxDimensions.js')
-rw-r--r--assets/javascripts/mx/primitives/mx.boxDimensions.js88
1 files changed, 88 insertions, 0 deletions
diff --git a/assets/javascripts/mx/primitives/mx.boxDimensions.js b/assets/javascripts/mx/primitives/mx.boxDimensions.js
new file mode 100644
index 0000000..d1d507d
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.boxDimensions.js
@@ -0,0 +1,88 @@
+MX.BoxDimensions = MX.Object3D.extend({
+
+ // this will be called within the contructor
+ init: function (opt) {
+
+ this.type = "BoxDimensions"
+
+ this.opt = opt
+
+ var width = opt.width || 100
+ var height = opt.height || 100
+ var depth = opt.depth || 100
+ var color = this.color = opt.color || 'rgba(0, 255, 122, .1)'
+ var borderColor = this.borderColor = opt.borderColor || '#0f3'
+ var sides = this.sides = opt.sides || "top bottom left right back"
+
+ // an Object3D's associated DOM node is the "el" property
+ this.el.classList.add('box')
+
+ var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+ var top = this.top = new MX.Object3D('.face.top')
+ top.rotationX = angle
+ top.width = width
+ top.height = depth
+ top.y = height
+
+ var bottom = this.bottom = new MX.Object3D('.face.bottom')
+ bottom.rotationX = -angle
+ bottom.width = width
+ bottom.height = depth
+ bottom.y = 0
+
+ var left = this.left = new MX.Object3D('.face.left')
+ left.rotationY = -angle
+ left.width = depth
+ left.height = height
+ left.x = -width/2
+ left.y = height/2
+
+ var right = this.right = new MX.Object3D('.face.right')
+ right.rotationY = angle
+ right.width = depth
+ right.height = height
+ right.x = width/2
+ right.y = height/2
+
+ var front = this.front = new MX.Object3D('.face.front')
+ front.width = width
+ front.height = height
+ front.z = -depth/2
+ front.y = height/2
+
+ var back = this.back = new MX.Object3D('.face.back')
+ back.width = width
+ back.height = height
+ back.rotationY = angle * 2
+ back.z = depth/2
+ back.y = height/2
+
+ // adding children, must also be instances of Object3D
+ if (-1 != sides.indexOf("top")) this.add(top)
+ if (-1 != sides.indexOf("bottom")) this.add(bottom)
+ if (-1 != sides.indexOf("left")) this.add(left)
+ if (-1 != sides.indexOf("right")) this.add(right)
+ if (-1 != sides.indexOf("front")) this.add(front)
+ if (-1 != sides.indexOf("back")) this.add(back)
+
+ this.children.forEach(function (face) {
+ face.el.style.backgroundColor = color
+ face.el.style.border = '3px solid ' + borderColor
+ })
+
+ bottom.el.style.border = "0"
+
+ // this applies the updated CSS style
+ // required for any change to take effect
+ // when a parent object's update() is called
+ // all its children will be updated as well
+ this.update()
+
+ // if this object's children won't move by themselves
+ this.updateChildren = false
+ }
+
+ // other properties will be mixed into the prototype of the new constructor
+
+}) \ No newline at end of file