Konva + Tween

gistfile1.js

(function() {
  var __hasProp = {}.hasOwnProperty;

  (function(factory) {
    if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
      return factory(require('knockout'), exports);
    } else if (typeof define === 'function' && define['amd']) {
      return define(['knockout', 'exports'], factory);
    } else {
      return factory(ko, ko.konva = {});
    }
  })(function(ko, exports) {
    var applyAnimations, applyEvents, applyInteractivityEventsCallback, ctor, expandConfig, getKonvaContainerIndex, makeBindingHandler, nodeFactory, nodeType, redraw, register;
    expandConfig = function(config) {
      var key, realValue, result, value, _ref;
      result = {};
      _ref = ko.utils.unwrapObservable(config);
      for (key in _ref) {
        value = _ref[key];
        realValue = ko.utils.unwrapObservable(value);
        if (typeof realValue !== 'undefined') {
          result[key] = realValue;
        }
      }
      return result;
    };
    applyAnimations = function(node, animations) {
      var key, value, _fn;
      _fn = function(key, value) {
        var fn, trans;
        trans = null;
        if (typeof node[key] === 'function') {
          fn = function(value) {
            var error;
            try {
              return node[key](value);
            } catch (_error) {
              error = _error;
            }
          };
          if (ko.isSubscribable(value)) {
            return value.subscribe(function(newValue) {
              if (trans) {
                trans.stop();
              }
              if (newValue) {
                return trans = fn(newValue);
              }
            });
          } else {
            if (value != null) {
              return fn(value);
            }
          }
        }
      };
      for (key in animations) {
        if (!__hasProp.call(animations, key)) continue;
        value = animations[key];
        _fn(key, value);
      }
    };
    applyEvents = function(node, element, events) {
      var baseName, key, listener, listeners, name, removeEvents, value, _fn, _i, _j, _len, _len1, _ref;
      removeEvents = [];
      _ref = node.eventListeners;
      for (baseName in _ref) {
        if (!__hasProp.call(_ref, baseName)) continue;
        listeners = _ref[baseName];
        for (_i = 0, _len = listeners.length; _i < _len; _i++) {
          listener = listeners[_i];
          if (listener.name === 'knockout') {
            removeEvents.push(baseName);
          }
        }
      }
      for (_j = 0, _len1 = removeEvents.length; _j < _len1; _j++) {
        name = removeEvents[_j];
        node.off("" + name + ".knockout");
      }
      _fn = function(key, value) {
        return node.on("" + key + ".knockout", function(evt) {
          return value(element, evt);
        });
      };
      for (key in events) {
        if (!__hasProp.call(events, key)) continue;
        value = events[key];
        _fn(key, value);
      }
    };
    redraw = function(node) {
      var drawTarget, layer;
      if (node.getStage()) {
        drawTarget = (function() {
          var _i, _len, _ref;
          if (node.nodeType === 'Stage') {
            _ref = node.children;
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
              layer = _ref[_i];
              clearTimeout(layer._kktimeout);
            }
            return node;
          } else {
            return node.getLayer();
          }
        })();
        drawTarget = typeof node.draw === 'function' ? node : node.getLayer();
        clearTimeout(drawTarget._kktimeout);
        return drawTarget._kktimeout = setTimeout((function(drawTarget) {
          return function() {
            return drawTarget.draw();
          };
        })(drawTarget), 1);
      }
    };
    getKonvaContainerIndex = function(ancestor, element, state) {
      var child, isKonvaBinding, result;
      if (state == null) {
        state = {
          index: 0
        };
      }
      isKonvaBinding = function(e) {
        return e._kk != null;
      };
      child = ko.virtualElements.firstChild(ancestor);
      while (child != null) {
        if (child._kk === element._kk) {
          return state.index;
        }
        if (isKonvaBinding(child)) {
          state.index += 1;
        } else {
          result = getKonvaContainerIndex(child, element, state);
          if (result >= 0) {
            return result;
          }
        }
        child = ko.virtualElements.nextSibling(child);
      }
      return -1;
    };
    applyInteractivityEventsCallback = function(node, valueAccessor) {
      return node.on("pointerup mouseup dragend mouseout", function() {
        var attr, attributes, values;
        attributes = node.getAttrs();
        values = valueAccessor();
        for (attr in attributes) {
          if (!attributes.hasOwnProperty(attr)) {
            continue;
          }
          if (values.hasOwnProperty(attr)) {
            values[attr](attributes[attr]);
          }
        }
        return null;
      });
    };
    makeBindingHandler = function(nodeFactory) {
      return {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
          var config, index, innerContext, kk, node, params;
          params = expandConfig(valueAccessor());
          config = params.config || params.animate || params.events ? params.config : params;
          node = nodeFactory(config, element.parentNode);
          element._kk = node;
          innerContext = bindingContext.createChildContext(viewModel);
          ko.utils.extend(innerContext, {
            'knockout-konva': {
              parentElement: element,
              parentNode: node
            }
          });
          ko.applyBindingsToDescendants(innerContext, element);
          applyInteractivityEventsCallback(node, valueAccessor);
          kk = bindingContext['knockout-konva'] || {};
          if (kk.parentNode) {
            kk.parentNode.add(node);
            index = getKonvaContainerIndex(kk.parentElement, element);
            if (index < 0) {
              throw new Error("element not contained within parent");
            }
            node.setZIndex(index);
          }
          ko.utils.domNodeDisposal.addDisposeCallback(element, (function(node) {
            return function() {
              var child, parent, _i, _len, _ref, _results;
              parent = node.getParent();
              if (!parent) {
                return;
              }
              _ref = parent.children;
              _results = [];
              for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                child = _ref[_i];
                if (!(child === node)) {
                  continue;
                }
                node.remove();
                redraw(parent);
                break;
              }
              return _results;
            };
          })(node));
          if (element.style) {
            element.style.display = 'none';
          }
          applyAnimations(node, params.animate);
          applyEvents(node, element, params.events);
          return {
            controlsDescendantBindings: true
          };
        },
        update: function(element, valueAccessor) {
          var config, node, params, parent;
          node = element._kk;
          parent = node.getParent() || null;
          params = expandConfig(valueAccessor());
          config = params.config || params.events || params.animate ? params.config : params;
          /* added code */
          if (config.tween){
                for(var p in config.tween) 
                    config.tween[p] = config.tween[p] || config[p];
                config.tween.node = node;                
              var tween = new Konva.Tween(config.tween);
              tween.play();            
          }else{
              node.setAttrs(config);
          }          
          /* end of added code */
          applyAnimations(node, params.animate);
          applyEvents(node, element, params.events);
          if (parent) {
            redraw(parent);
          }
          return redraw(node);
        }
      };
    };
    register = function(name, factory) {
      ko.bindingHandlers[name] = makeBindingHandler(factory);
      return ko.virtualElements.allowedBindings[name] = true;
    };
    exports['register'] = register;
    for (nodeType in Konva) {
      ctor = Konva[nodeType];
      if (!(typeof ctor === 'function')) {
        continue;
      }
      nodeFactory = (function(nodeType, ctor) {
        if (nodeType === 'Stage') {
          return function(config, parent) {
            var div;
            div = document.createElement('div');
            parent.appendChild(div);
            config['container'] = div;
            return new ctor(config);
          };
        } else {
          return function(config) {
            return new ctor(config);
          };
        }
      })(nodeType, ctor);
      register("Konva." + nodeType, nodeFactory);
    }
  });

}).call(this);