easing select

demo/index.js

@@ -3,7 +3,7 @@ var rgba = require('color-style')
 
 var timeline = require('keytime')(data) //require('keytime')
 
-require('canvas-testbed')(render, start)
+require('canvas-testbed')(render, start, { once: false })
 
 var time = 0
 var endDelay = 1
@@ -28,6 +28,7 @@ function start() {
 	editor.constraint('alpha', { min: 0, max: 1, step: 0.05, decimals: 2 })
 	editor.constraint('fill', { min: 0, max: 255 })
 	editor.add(timeline, 'shape')
+	// editor.add(timeline, 'shape2')
 
 	process.nextTick(function() {
 		editor.appendTo(document.body)

dom/create-animation.js

@@ -29,6 +29,12 @@ module.exports = function(editor, timelineData) {
 	    	editor.emit('highlight-property', propData)
 	    })
 
+	    events.on(propElement, 'dblclick', function(ev) {
+	    	ev.stopPropagation()
+	    	ev.preventDefault()
+	        editor.emit('keyframe-toggle', timelineData, propData)
+	    })
+
 		container.appendChild(propElement)
 	})
 

dom/create-property.js

@@ -4,6 +4,7 @@ var hyperglue = require('hyperglue')
 var $ = require('dom-select')
 var classes = require('dom-classes')
 var events = require('dom-events')
+var domify = require('domify')
 
 var BaseProperty = require('../lib/property-data')
 
@@ -17,16 +18,32 @@ module.exports = function(editor, timelineData, property) {
     })
     ret.element = element
 
+    var easeElement = $('.easing', element)
+    ret.easingBox = editor.createEasingSelect({ element: easeElement })
+
     var valueEditor = editor.createValueEditor(timelineData.timeline, property)
+    var controlPanel = $('.control-editor', element)
     if (valueEditor && valueEditor.element) {
-    	$('.control-editor', element).appendChild(valueEditor.element)
+    	controlPanel.appendChild(valueEditor.element)
     	ret.valueEditor = valueEditor
 
+        //set default property
+        property.value = valueEditor.value
+
     	valueEditor.on('change', function() {
     		var current = property.keyframes.get( editor.playhead() )
-	        if (current) {
+	        if (current) { //adjust current keyframe
+                property.value = valueEditor.value
 	            current.value = valueEditor.value
-	        }
+	        } 
+            // else if (property.keyframes.count === 0) { //no keyframes, adjust constant
+            //     property.value = valueEditor.value
+            // } 
+            else {
+                console.log("ADD")
+                var key = ret._createKeyframe(timelineData.timeline, editor.playhead() )
+                ret.addKeyframe(editor, key)
+            }
     	})
     }
 

dom/html/property.html

@@ -1,7 +1,7 @@
 <div class="timeline-control">
-	<span class="keyframe-previous">&lt;</span>
-	<span class="keyframe-toggle">&#8226;</span>
-	<span class="keyframe-next">&gt;</span>
-	<span class="name"></span>
-	<span class="control-editor"></span>
+	<span class="keyframe-previous"></span><span class="keyframe-toggle"></span><span class="keyframe-next"></span><span class="name"></span>
+	<span class="easing-container"><select class="easing">
+		<option value="quadOut" selected>none</option>
+		<option value="linear">linear</option>
+	</select></span><span class="control-editor"></span>
 </div>

dom/html/timeline.html

@@ -1,11 +1,11 @@
 <div class="timeline-layer timeline-row">
 	<div class="timeline-header">
-		<span class="expand">&gt;</span>
+		<span class="expand"></span>
 		<span class="name"></span>
 		<div class="buttons">
-			<span class="lock">&#8226;</span>
+			<!--<span class="lock">&#8226;</span>
 			<span class="solo">&#8226;</span>
-			<span class="visible">&#8226;</span>
+			<span class="visible">&#8226;</span>-->
 		</div>
 	</div>
 	<div class="controls">

dom/icons.css

@@ -0,0 +1,134 @@
+.keyframe-next, 
+.keyframe-previous, 
+.keyframe-toggle, 
+.expand,
+.easing-container {
+	display: inline-block;
+	opacity: 0.6;
+	padding: 0;
+	margin: 0;
+	/*width: 4px;*/
+	top: -3px;
+	font-family: 'Courier New', monospace;
+	position: relative;
+	-webkit-transition: opacity 0.25s ease;
+	-moz-transition: opacity 0.25s ease;
+	-ms-transition: opacity 0.25s ease;
+	-o-transition: opacity 0.25s ease;
+	transition: opacity 0.25s ease;
+}
+.keyframe-next:hover, 
+.keyframe-previous:hover, 
+.keyframe-toggle:hover,
+.expand:hover,
+.easing:after {
+	opacity: 1.0;
+}
+
+.keyframe-next, .keyframe-previous {
+	padding-right: 4px;
+	padding-left: 4px;
+}
+
+.keyframe-next:after, .keyframe-previous:after {
+	font-size: 9px;
+	font-weight: bold;
+}
+.keyframe-previous:after {
+	content: '<';
+}
+.keyframe-next:after {
+	content: '>';
+}
+.keyframe-toggle {
+	top: 0px;
+}
+.keyframe-toggle:after {
+	content: '•';
+	font-size: 19px;
+}
+
+.layer-open > .timeline-header > .expand:after {
+	content: '-';
+}
+.expand {
+	padding-left: 5px;
+	padding-right: 5px;
+	position: relative;
+	top: -1px;
+}
+.expand:after {
+	font-weight: bold;
+	content: '>';
+}
+
+.keyframe:after {
+	content: '\2666';
+	position: relative;
+	top: -6px;
+	left: 1px;
+	font-weight: bold;
+	font-size: 14px;
+}
+
+.easing-container {
+	width: 65px;
+	height: 16px;
+	border: 1px solid transparent;
+	box-sizing: border-box;
+	background: #ababab;
+	border-radius: 2px 2px;
+	opacity: 0.25;
+	-webkit-transition: all 0.25s ease;
+	-moz-transition: all 0.25s ease;
+	-ms-transition: all 0.25s ease;
+	-o-transition: all 0.25s ease;
+	transition: all 0.25s ease;
+	margin-left: 5px;
+	margin-right: 0px;
+	text-align: center;
+	color: black;
+	padding: 0;
+	position: relative;
+	top: 3px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: clip;
+	float: right;
+}
+
+.easing {
+	cursor: default;
+	border: 0;
+	background: none;
+	outline: 0;
+    -webkit-appearance:none;
+    -moz-appearance:none;
+    appearance:none;
+	width: 65px;
+	height: 16px;
+	display: inline-block;
+	font-size: 8px;
+	position: relative;
+	top: -3px;
+	left: 4px;
+}
+.easing:disabled {
+	color: currentColor;
+}
+@-moz-document url-prefix() {
+    .easing {
+        width: 75px;
+    }
+}
+.timeline-control.has-keyframe > .easing-container {
+	opacity: 1.0;
+}
+
+.timeline-control.has-keyframe > .easing-container > .easing {
+	cursor: pointer;
+}
+
+.timeline-control.has-keyframe > .easing-container:hover {
+	border: 1px solid #969696;
+}

dom/number-editors.js

@@ -46,6 +46,8 @@ Object.defineProperty(NumberEditors.prototype, "value", {
         if (typeof array === 'number' && this.editors.length === 1) {
             this.editors[0].value = array
         } else {
+            if (!array)
+                debugger
             array.forEach(function(v, i) { 
                 this.editors[i].value = v
             }.bind(this))

dom/select-box.js

@@ -0,0 +1,66 @@
+var domval = require('dom-value')
+var events = require('dom-events')
+var EventEmitter = require('events').EventEmitter
+var inherits = require('inherits')
+
+function Select(opt) {
+	if (!(this instanceof Select))
+		return new Select(opt)
+	opt = opt||{}
+	if (Array.isArray(opt))
+		opt = { data: opt }
+	this.element = opt.element || document.createElement("select")
+	this.data = []
+
+	if (opt.data) 
+		this.set(opt.data)
+}
+
+inherits(Select, EventEmitter)
+
+Select.prototype.select = function(value) {
+	this.data.forEach(function(f) {
+		if (f.value === value)
+			f.element.setAttribute('selected', 'selected')
+		else
+			f.element.removeAttribute('selected')
+	})
+}
+
+Select.prototype.clear = function() {
+	this.data.length = 0
+	while (this.element.firstChild) 
+	    this.element.removeChild(this.element.firstChild);	
+}
+
+Select.prototype.set = function(data) {
+	this.clear()
+	this.add(data)
+}
+
+Select.prototype.add = function(data) {
+	this.data.length = 0
+	data.forEach(function(f) {
+		var opt = document.createElement('option');
+		var settings = f
+		if (typeof f === 'string')  {
+			settings = {}
+			settings.name = f
+			settings.value = f
+		}
+
+		opt.setAttribute('value', settings.value)
+		if (settings.disabled)
+			opt.setAttribute('disabled', 'disabled')
+		if (settings.selected)
+			opt.setAttribute('selected', 'selected')
+
+		opt.innerHTML = settings.name
+
+		settings.element = opt
+		this.data.push(settings)
+	    this.element.appendChild(opt);	
+	}.bind(this))
+} 
+
+module.exports = Select