fixed cube, cylinder animation properties

kode-team · Dec 25, 2019 · e84bf1c · e84bf1c
1 parent ba5999a
commit e84bf1c
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 5 deletions.
diff --git a/docs/main.js b/docs/main.js
diff --git a/docs/main.js.gz b/docs/main.js.gz
diff --git a/src/editor/items/layers/CubeLayer.js b/src/editor/items/layers/CubeLayer.js
@@ -25,6 +25,8 @@ const customSelectorName = {
 
 const cssKeyValue = { 
   'position': true, 
+  'left': true,
+  'top': true,
   'right': true,
   'bottom': true, 
   'width': true,
@@ -173,7 +175,6 @@ export class CubeLayer extends Component {
         this.setCustomKeyframes(keyframes, c);
       })  
     }
-
     return keyframes
   }    
 

diff --git a/src/editor/items/layers/CylinderLayer.js b/src/editor/items/layers/CylinderLayer.js
@@ -5,8 +5,16 @@ import { Length } from "../../unit/Length";
 import { editor } from "../../editor";
 import icon from "../../../csseditor/ui/icon/icon";
 
+const customKeyValue = {
+  'count': true, 
+  'rate': true, 
+  'face': true 
+}
+
 const cssKeyValue = { 
   'position': true, 
+  'left': true,
+  'top': true,
   'right': true,
   'bottom': true, 
   'width': true,
@@ -120,6 +128,35 @@ export class CylinderLayer extends Component {
   setCustomKeyframes (keyframes, customProperty) {
 
 
+    if (customProperty.property === 'rate') {
+
+      var {width} = this.json;
+
+      var count = this.json.count.value; 
+      var w = width.value;
+      var r = w/2
+      var angle = 360 / count; 
+
+      var faceList = repeat(count).map((it, index) => {
+
+        var rotateY = index * angle; 
+
+        return { 
+          selector: `[data-id="${this.json.id}"] .face[data-index="${index}"]`,
+          properties: [{
+            keyframes: customProperty.keyframes.map(({time, value, timing}) => {            
+              return {time, value: `rotateY(${rotateY}deg) translateZ(${r * value}px)`, timing} 
+            }), 
+            'property': 'transform',  // 흠 하나씩 나열해야할 듯 
+          }] 
+        }
+
+      })
+
+      keyframes.push(...faceList)      
+    }
+
+
     if (customProperty.property.includes('.color')) {
 
       var [_, index, _] = customProperty.property.split('.')
@@ -153,7 +190,8 @@ export class CylinderLayer extends Component {
     var nestedProperties = []
 
     properties.forEach(p => {
-      if (p.property.includes('face')) {
+
+      if (p.property.includes('face') || customKeyValue[p.property] ) {
         customProperties.push(p);
       } else if (cssKeyValue[p.property]) {
         cssProperties.push(p);

diff --git a/src/scss/csseditor/selection-view.scss b/src/scss/csseditor/selection-view.scss
@@ -310,8 +310,6 @@
             pointer-events: none;
             clip-path: polygon(0% 0%, 50% 100%, 100% 0%); 
             box-shadow: inset 0px -1px 9px 0 rgba(255, 255, 255, 0.5);         
-            // animation: bounce-up-down 0.75s infinite ease-in-out;
-            // border-radius: 100%;
           }          
         }