Merge pull request supermedium#71 from aronduby/master

add ability to position items `angle` degrees apart on circle layout …
vinutv · Jun 23, 2017 · 2efa128 · 2efa128
2 parents 279cd84 + 8f1ffee
commit 2efa128
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 6 deletions.
diff --git a/components/layout/README.md b/components/layout/README.md
@@ -48,6 +48,7 @@ We move then entire group around while maintaining the layout:
 | plane    | Which plane direction for 2D layout. Can be `xy`, `yz`, or `xz` (for type `box`, `circle`, `line`) | `xy`          |
 | radius   | Radius in meters (for type `circle`, `cube`, `dodecahedron`, `pyramid`.                            | 1             |
 | reverse  | Whether to reverse direction of layout.                                                            | false         |
+| angle    | For type `circle`, set this to position items `angle` degrees apart                                | false         |
 
 ### Usage
 

diff --git a/components/layout/dist/aframe-layout-component.js b/components/layout/dist/aframe-layout-component.js
@@ -56,7 +56,9 @@
 	    radius: {default: 1, min: 0, if: {type: ['circle', 'cube', 'dodecahedron', 'pyramid']}},
 	    reverse: {default: false},
 	    type: {default: 'line', oneOf: ['box', 'circle', 'cube', 'dodecahedron', 'line',
-	                                    'pyramid']}
+	                                    'pyramid']},
+	    fill: {default: true, if: {type: ['circle']}},
+	    angle: {type: 'number', default: false, min:0, max: 360, if: {type: ['circle']}}
 	  },
 
 	  /**
@@ -187,7 +189,14 @@
 	  var positions = [];
 
 	  for (var i = 0; i < numChildren; i++) {
-	    var rad = i * (2 * Math.PI) / numChildren;
+	    var rad;
+
+	    if (isNaN(data.angle)) {
+	      rad = i * (2 * Math.PI) / numChildren;
+	    } else {
+	      rad = i * data.angle * 0.01745329252; // angle to radian
+	    }
+
 	    var position = [
 	      startPosition.x,
 	      startPosition.y,

diff --git a/components/layout/dist/aframe-layout-component.min.js b/components/layout/dist/aframe-layout-component.min.js
diff --git a/components/layout/examples/circle-angle/index.html b/components/layout/examples/circle-angle/index.html
@@ -0,0 +1,56 @@
+<html>
+  <head>
+    <title>Circle Layout Angle</title>
+    <meta name="description" content="Circular layout of boxes"></meta>
+    <meta property="og:image" content="https://raw.githubusercontent.com/ngokevin/kframe/master/components/layout/examples/circle/preview.png"></meta>
+    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
+    <script src="../../dist/aframe-layout-component.min.js"></script>
+  </head>
+  <body>
+    <a-scene>
+      <a-assets>
+        <a-mixin id="cube" geometry="primitive: box; depth: 1; height: 1; width: 1"
+                 material="color: #FFFBE0">
+        </a-mixin>
+        <a-mixin id="secondary" material="color: #FFB400"></a-mixin>
+      </a-assets>
+
+      <a-entity geometry="primitive: sphere; radius: 1000"
+                material="color: #2994B2; shader: flat" scale="1 1 -1">
+      </a-entity>
+
+      <a-entity layout="type: circle; radius: 2.5; angle: 50;" position="0 0 -5">
+        <a-animation attribute="rotation" dur="5000" easing="linear"
+                     repeat="indefinite" to="0 360 360">
+        </a-animation>
+        <a-entity mixin="cube"></a-entity>
+        <a-entity mixin="cube"></a-entity>
+        <a-entity mixin="cube"></a-entity>
+      </a-entity>
+
+      <a-entity layout="type: circle; radius: 3; angle: 30;" position="0 0 -5">
+        <a-animation attribute="rotation" dur="5000" easing="linear"
+                     repeat="indefinite" to="360 0 360">
+        </a-animation>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+      </a-entity>
+    </a-scene>
+
+    <!--githubcorner-->
+    <a href="https://github.com/ngokevin/kframe/tree/master/components/layout/examples/circle/" class="github-corner">
+      <svg width="80" height="80" viewBox="0 0 250 250" style="fill: #111; color: #EFEFEF; position: fixed; bottom: 0; border: 0; left: 0; transform: rotate(180deg); opacity: 0.8">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+      </svg>
+    </a>
+    <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+    </style>
+    <!--endgithubcorner-->
+  </body>
+</html>
diff --git a/components/layout/examples/circle-angle/preview.png b/components/layout/examples/circle-angle/preview.png
diff --git a/components/layout/index.html b/components/layout/index.html
@@ -88,8 +88,14 @@ <h3>Circle Layout - Planes</h3>
         <li>
           <a href="examples/circle/" style="background-color: #222; background-image: url(examples/circle/preview.png)"></a>
           <h3>Circle Layout</h3>
-          <p>Circular layout of boxes</p>
+          <p>Circular layout of boxes, fills circle (default)</p>
         </li>
+
+      <li>
+        <a href="examples/circle-angle/" style="background-color: #222; background-image: url(examples/circle-angle/preview.png)"></a>
+        <h3>Circle Layout - Angle</h3>
+        <p>Circular layout of boxes with supplied angle</p>
+      </li>
 
         <li>
           <a href="examples/cube/" style="background-color: #222; background-image: url(examples/cube/preview.png)"></a>

diff --git a/components/layout/index.js b/components/layout/index.js
@@ -10,7 +10,9 @@ AFRAME.registerComponent('layout', {
     radius: {default: 1, min: 0, if: {type: ['circle', 'cube', 'dodecahedron', 'pyramid']}},
     reverse: {default: false},
     type: {default: 'line', oneOf: ['box', 'circle', 'cube', 'dodecahedron', 'line',
-                                    'pyramid']}
+                                    'pyramid']},
+    fill: {default: true, if: {type: ['circle']}},
+    angle: {type: 'number', default: false, min:0, max: 360, if: {type: ['circle']}}
   },
 
   /**
@@ -141,7 +143,14 @@ function getCirclePositions (data, numChildren, startPosition) {
   var positions = [];
 
   for (var i = 0; i < numChildren; i++) {
-    var rad = i * (2 * Math.PI) / numChildren;
+    var rad;
+
+    if (isNaN(data.angle)) {
+      rad = i * (2 * Math.PI) / numChildren;
+    } else {
+      rad = i * data.angle * 0.01745329252; // angle to radian
+    }
+
     var position = [
       startPosition.x,
       startPosition.y,