topical media & game development

talk show tell print

mobile-graphic-enchant-dev-src-DomManager.js / js



  enchant.DomManager = enchant.Class.create({
      initialize: function(node, elementDefinition) {
          var core = enchant.Core.instance;
          this.layer = null;
          this.targetNode = node;
          if (typeof elementDefinition === 'string') {
              this.element = document.createElement(elementDefinition);
          } else if (elementDefinition instanceof HTMLElement) {
              this.element = elementDefinition;
          }
          this.style = this.element.style;
          this.style.position = 'absolute';
          this.style[enchant.ENV.VENDOR_PREFIX + 'TransformOrigin'] = '0px 0px';
          if (core._debug) {
              this.style.border = '1px solid blue';
              this.style.margin = '-1px';
          }
  
          var manager = this;
          this._setDomTarget = function() {
              manager.layer._touchEventTarget = manager.targetNode;
          };
          this._attachEvent();
      },
      getDomElement: function() {
          return this.element;
      },
      getDomElementAsNext: function() {
          return this.element;
      },
      getNextManager: function(manager) {
          var i = this.targetNode.parentNode.childNodes.indexOf(manager.targetNode);
          if (i !== this.targetNode.parentNode.childNodes.length - 1) {
              return this.targetNode.parentNode.childNodes[i + 1]._domManager;
          } else {
              return null;
          }
      },
      addManager: function(childManager, nextManager) {
          var nextElement;
          if (nextManager) {
              nextElement = nextManager.getDomElementAsNext();
          }
          var element = childManager.getDomElement();
          if (element instanceof Array) {
              element.forEach(function(child) {
                  if (nextElement) {
                      this.element.insertBefore(child, nextElement);
                  } else {
                      this.element.appendChild(child);
                  }
              }, this);
          } else {
              if (nextElement) {
                  this.element.insertBefore(element, nextElement);
              } else {
                  this.element.appendChild(element);
              }
          }
          this.setLayer(this.layer);
      },
      removeManager: function(childManager) {
          if (childManager instanceof enchant.DomlessManager) {
              childManager._domRef.forEach(function(element) {
                  this.element.removeChild(element);
              }, this);
          } else {
              this.element.removeChild(childManager.element);
          }
          this.setLayer(this.layer);
      },
      setLayer: function(layer) {
          this.layer = layer;
          var node = this.targetNode;
          var manager;
          if (node.childNodes) {
              for (var i = 0, l = node.childNodes.length; i < l; i++) {
                  manager = node.childNodes[i]._domManager;
                  if (manager) {
                      manager.setLayer(layer);
                  }
              }
          }
      },
      render: function(inheritMat) {
          var node = this.targetNode;
          var matrix = enchant.Matrix.instance;
          var stack = matrix.stack;
          var dest = [];
          matrix.makeTransformMatrix(node, dest);
          matrix.multiply(stack[stack.length - 1], dest, dest);
          matrix.multiply(inheritMat, dest, inheritMat);
          node._matrix = inheritMat;
          var ox = (typeof node._originX === 'number') ? node._originX : node.width / 2 || 0;
          var oy = (typeof node._originY === 'number') ? node._originY : node.height / 2 || 0;
          var vec = [ ox, oy ];
          matrix.multiplyVec(dest, vec, vec);
  
          node._offsetX = vec[0] - ox;
          node._offsetY = vec[1] - oy;
          if(node.parentNode && !(node.parentNode instanceof enchant.Group)) {
              node._offsetX += node.parentNode._offsetX;
              node._offsetY += node.parentNode._offsetY;
          }
          if (node._dirty) {
              this.style[enchant.ENV.VENDOR_PREFIX + 'Transform'] = 'matrix(' +
                  dest[0].toFixed(10) + ',' +
                  dest[1].toFixed(10) + ',' +
                  dest[2].toFixed(10) + ',' +
                  dest[3].toFixed(10) + ',' +
                  dest[4].toFixed(10) + ',' +
                  dest[5].toFixed(10) +
              ')';
          }
          this.domRender();
      },
      domRender: function() {
          var node = this.targetNode;
          if(!node._style) {
              node._style = {};
          }
          if(!node.__styleStatus) {
              node.__styleStatus = {};
          }
          if (node.width !== null) {
              node._style.width = node.width + 'px';
          }
          if (node.height !== null) {
              node._style.height = node.height + 'px';
          }
          node._style.opacity = node._opacity;
          node._style['background-color'] = node._backgroundColor;
          if (typeof node._visible !== 'undefined') {
              node._style.display = node._visible ? 'block' : 'none';
          }
          if (typeof node.domRender === 'function') {
              node.domRender(this.element);
          }
          var value;
          for (var prop in node._style) {
              value = node._style[prop];
              if(node.__styleStatus[prop] !== value && value != null) {
                  this.style.setProperty(prop, '' + value);
                  node.__styleStatus[prop] = value;
              }
          }
      },
      _attachEvent: function() {
          if (enchant.ENV.TOUCH_ENABLED) {
              this.element.addEventListener('touchstart', this._setDomTarget, true);
          }
          this.element.addEventListener('mousedown', this._setDomTarget, true);
      },
      _detachEvent: function() {
          if (enchant.ENV.TOUCH_ENABLED) {
              this.element.removeEventListener('touchstart', this._setDomTarget, true);
          }
          this.element.removeEventListener('mousedown', this._setDomTarget, true);
      },
      remove: function() {
          this._detachEvent();
          this.element = this.style = this.targetNode = null;
      }
  });
  
  enchant.DomlessManager = enchant.Class.create({
      initialize: function(node) {
          this._domRef = [];
          this.targetNode = node;
      },
      _register: function(element, nextElement) {
          var i = this._domRef.indexOf(nextElement);
          var childNodes;
          if (element instanceof Array) {
              if (i === -1) {
                  Array.prototype.push.apply(this._domRef, element);
              } else {
                  Array.prototype.splice.apply(this._domRef, [i, 0].concat(element));
              }
          } else {
              if (i === -1) {
                  this._domRef.push(element);
              } else {
                  this._domRef.splice(i, 0, element);
              }
          }
      },
      getNextManager: function(manager) {
          var i = this.targetNode.parentNode.childNodes.indexOf(manager.targetNode);
          if (i !== this.targetNode.parentNode.childNodes.length - 1) {
              return this.targetNode.parentNode.childNodes[i + 1]._domManager;
          } else {
              return null;
          }
      },
      getDomElement: function() {
          var ret = [];
          this.targetNode.childNodes.forEach(function(child) {
              ret = ret.concat(child._domManager.getDomElement());
          });
          return ret;
      },
      getDomElementAsNext: function() {
          if (this._domRef.length) {
              return this._domRef[0];
          } else {
              var nextManager = this.getNextManager(this);
              if (nextManager) {
                  return nextManager.element;
              } else {
                  return null;
              }
          }
      },
      addManager: function(childManager, nextManager) {
          var parentNode = this.targetNode.parentNode;
          if (parentNode) {
              if (nextManager === null) {
                  nextManager = this.getNextManager(this);
              }
              if (parentNode instanceof enchant.Scene) {
                  parentNode._layers.Dom._domManager.addManager(childManager, nextManager);
              } else {
                  parentNode._domManager.addManager(childManager, nextManager);
              }
          }
          var nextElement = nextManager ? nextManager.getDomElementAsNext() : null;
          this._register(childManager.getDomElement(), nextElement);
          this.setLayer(this.layer);
      },
      removeManager: function(childManager) {
          var dom;
          var i = this._domRef.indexOf(childManager.element);
          if (i !== -1) {
              dom = this._domRef[i];
              dom.parentNode.removeChild(dom);
              this._domRef.splice(i, 1);
          }
          this.setLayer(this.layer);
      },
      setLayer: function(layer) {
          this.layer = layer;
          var node = this.targetNode;
          var manager;
          if (node.childNodes) {
              for (var i = 0, l = node.childNodes.length; i < l; i++) {
                  manager = node.childNodes[i]._domManager;
                  if (manager) {
                      manager.setLayer(layer);
                  }
              }
          }
      },
      render: function(inheritMat) {
          var matrix = enchant.Matrix.instance;
          var stack = matrix.stack;
          var node = this.targetNode;
          var dest = [];
          matrix.makeTransformMatrix(node, dest);
          matrix.multiply(stack[stack.length - 1], dest, dest);
          matrix.multiply(inheritMat, dest, inheritMat);
          node._matrix = inheritMat;
          var ox = (typeof node._originX === 'number') ? node._originX : node.width / 2 || 0;
          var oy = (typeof node._originY === 'number') ? node._originY : node.height / 2 || 0;
          var vec = [ ox, oy ];
          matrix.multiplyVec(dest, vec, vec);
          node._offsetX = vec[0] - ox;
          node._offsetY = vec[1] - oy;
          stack.push(dest);
      },
      remove: function() {
          this._domRef = [];
          this.targetNode = null;
      }
  });
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.